0.2.6 • Published 3 years ago
melody-player v0.2.6
MelodyPlayer
WebComponent based music player.
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>