Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

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>
    <!-- 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>
You can’t perform that action at this time.