melody-player

    0.2.6 • Public • Published

    MelodyPlayer

    WebComponent based music player.

    Demo

    MelodyPlayer Demo

    Borwser Compatibility

    Browsers that support Custom Elements v1 and ShadowDOM v1 are supported.

    Tested on Chrome 66, Firefox 59 with flags enabled, Firefox / Microsoft Edge with Polyfill.

    WebComponents polyfill: webcomponents/webcomponentsjs

    Usage

    <html>
    <head>
        <script src="./dist/player.min.js"></script>
        <!-- optional, but recommend placeholder style -->
        <link rel="stylesheet" href="./dist/preload.css">
    </head>
    <body>
        <!-- single audio -->
        <melody-player>
            <audio src="track1.mp3"></audio>
        </melody-player>
    
        <!-- multi audios -->
        <melody-player>
            <audio src="track1.mp3"></audio>
            <audio src="track2.mp3"></audio>
        </melody-player>
    
        <!-- optional lrc -->
        <melody-player>
            <audio src="track1.mp3" data-lrc="track1.lrc"></audio>
            <!-- display 2 lrc at the same time -->
            <audio src="track2.mp3" data-lrc="track2.lrc" data-sub-lrc="track2.zh.lrc"></audio>
        </melody-player>
    </body>
    </html>

    Install

    npm i melody-player

    DownloadsWeekly Downloads

    8

    Version

    0.2.6

    License

    MIT

    Unpacked Size

    82.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • rocka