html5-audio–player
1。介绍
使用FlexBox，SVG，CSS动画和JS API使用html5 audio player （带有播放列表）。
从 @k-ivan分叉，网址为http://*co*depen.*io/k-ivan/pen/pjmlmj
演示：html5-audio-player
2。如何使用
代码示例：
<div id=\’player\’></div>
<script src="js/AudioPlayer.js"></script>
<script>
// test image for web notifications
var iconImage = null;
AP.init({
container:\’#player\’,//a string containing one CSS selector
volume : 0.7,
autoPlay : true,
notification: false,
playList: [
{\’icon\’: iconImage, \’title\’: \’Try Everything\’, \’file\’: \’mp3/try-everything.mp3\’},
{\’icon\’: iconImage, \’title\’: \’Let It Go\’, \’file\’: \’mp3/let-it-go.mp3\’}
]
});
</script>
</body>
</html>\”>
<!DOCTYPE html > < html > < head > < meta charset =\" UTF-8 \" > < title > Audio player HTML5 </ title > < meta name =\" viewport \" content =\" width=device-width, initial-scale=1 \" > < link href =\" https://fonts.google**ap*is.com/icon?family=Material+Icons \" rel =\" stylesheet \" > < link rel =\" stylesheet \" href =\" css/AudioPlayer.css \" > < style > # player { position : relative; max-width : 700 px ; height : 500 px ; border : solid 1 px gray; } </ style > </ head > < body > <!-- Audio player container--> < div id =\' player \' > </ div > <!-- Audio player js begin--> < script src =\" js/AudioPlayer.js \" > </ script > < script > // test image for web notifications var iconImage = null ; AP . init ( { container : \'#player\' , //a string containing one CSS selector volume : 0.7 , autoPlay : true , notification : false , playList : [ { \'icon\' : iconImage , \'title\' : \'Try Everything\' , \'file\' : \'mp3/try-everything.mp3\' } , { \'icon\' : iconImage , \'title\' : \'Let It Go\' , \'file\' : \'mp3/let-it-go.mp3\' } ] } ) ; </ script > <!-- Audio player js end--> </ body > </ html >
它将起作用！
