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。如何使用
- 在
</head>之前插入Google材料图标和AudioPlayer.css - 在
</body>之前插入AudiOplayer.js - 使用AP.INIT功能
代码示例：
<!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 >它将起作用！
下载源码
通过命令行克隆项目:
git clone https://github.com/likev/html5-audio-player.git