Skip to content

rocka/melody-player

Repository files navigation

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>