WebComponent based music player.
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
<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>