melody-player
v0.2.6
Published
WebComponent based audio player.
Downloads
24
Readme
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>