html5 audio player

FLASH源码 2025-08-12

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。如何使用

  1. 之前插入Google材料图标和AudioPlayer.css
  2. 之前插入AudiOplayer.js
  3. 使用AP.INIT功能

代码示例:

Audio player HTML5
">
 >
< 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 >
      
     < 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 >

它将起作用!

下载源码

通过命令行克隆项目:

git clone https://github.com/likev/html5-audio-player.git