WebComponent based music player.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
dist
font
script
src
.eslintignore
.eslintrc.js
.gitattributes
.gitignore
.npmignore
README.md
index.html
package-lock.json
package.json

README.md

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>
</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>