HTML5尝鲜（1）：使用aduio标签打造音乐播放器

关于html5的炒作已经有一段时间了，小弟亦是个跟风之人，对该新鲜事物也充满好奇和期待。本文为该系列（HTML5尝鲜）第一节，先以一个简单的demo开胃，希望能勾起各位同学对html5的兴趣和关注。

　　html5里有一个新标签audio，该标签用以定义声音，比如音乐或其他音频流。
 既然audio标签可以播放音频，那我们可以不再使用flash、wmp等其他任何第三方组件，轻而易举的使用纯html来打造一个音乐播放器。

　　例子：
<audio src="someaudio.MP3"></audio>

　　或
<audio >
<source src="someaudio.MP3"/>

　　</audio>

　　下面是小弟用audio做的一个音乐播放器的界面，先睹为快：

　　　

 

 　　audio 有几个属性：
          src:String型，所播放音频的 url。
          autoplay:bool型，如果是 true，则音频在就绪后马上播放。默认为false。
          controls:bool型，如果是 true，则向用户显示控件，比如播放按钮。默认为false。
          更多详细属性：http://www.w3school.com.cn/html5/html5_audio.asp

　　audio 有几个事件：
          onended:当媒介已抵达结尾时运行脚本，也就是当前歌曲播放完了，这里的“媒介”是指audio标签。
          onloadstart:当浏览器开始加载媒介数据时运行脚本。
          onplay:当媒介数据将要开始播放时运行脚本。这里的“媒介数据”是指播放的文件。
          onplaying:当媒介数据已开始播放时运行脚本。
          onpause:当媒介数据暂停时运行脚本。
          onerror:当加载媒介数据出错时运行的脚本。(w3school不是这样解释的)
          更多详细事件：http://www.w3school.com.cn/html5/html5_ref_eventattributes.asp#Media_Events

　
打造该播放器的完整代码如下：

HTML

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head  runat ="server" >
     < title > 无标题页 </ title >
     < style  type ="text/css" >
    body
     {  font-size : 13px ;
      font-family : 宋体 ;
     }
    #ul_musicList
     {
      width : 300px ;
      list-style-type : none ;    
      margin : 5px 0 3px 0 ;
      padding : 0px ;     
     }   
     #ul_musicList li
      {
          padding : 5px ;
          border : solid 1px #EEEEEE ;
      }    
     </ style >
     < script  src ="Scripts/jquery-1.3.2.js"  type ="text/javascript" ></ script >
     < script  src ="Scripts/MusicBox.js"  type ="text/javascript" ></ script >
     < script  type ="text/javascript" >
     var  mb = null ;
    $().ready( function (){
    mb = new  MusicBox();
    mb.init();
    });
     </ script >
</ head >
< body  >
     < div >
   < audio  id ="musicBox"   controls ="true"  
    onended ="mb.nextMusic()"  
    onloadstart ="mb.loadStart()"  
    onplaying ="mb.playing()"  
    onpause ="mb.pausePaly()"  
    onerror ="mb.loadError()"
     >
   </ audio >  
   < br  />   < input  id ="btnNext"  type ="button"  value ="下一首"  onclick ="javascript:mb.nextMusic()"    />
   < span  id ="sn_status" ></ span >< br  />  
   < div  style =" margin-top:5px" > 歌曲列表： </ div >
     < ul  id ="ul_musicList"    >
   </ ul >
  < div  style ="width:300px; text-align:right" >
       播放模式: < select  id ="slt_playMode" >
             < option  value ="1" > 全部循环 </ option >
             < option  value ="2" > 单曲循环 </ option >
         </ select >
         </ div >
   </ div >
</ body >
</ html >

 

MusicBox.js

MusicBox = function  (){
     var  _this = this ;
     var   media =  document.getElementById( " musicBox " ); 
     var   musicFiles = [
                   {name: " 犯错 " ,url: " http://www.yandui.com/upload/sound/2009-9-20/20_34_25_953_.mp3 " } ,
                   {name: " 天使的翅膀 " ,url: " http://www.masradio.com.cn/uploadfile/program/uploadfile/200805/20080522090800196.mp3 " },
                   {name: " 无名轻音乐 " ,url: " http://audio.ngfiles.com/88000/88260_Zanarkan_Mastered_Piano_Ve.mp3 " },
                   {name: " 草泥马之歌 " ,url: " http://www.cnblogs.com " }, // 错误的资源
                   {name: " 相思风雨中 " ,url: " http://www.czopen.com/club/forum/files/247.mp3 " }
                   ];
     // 当前正在播放的歌曲的索引               
     var  index =- 1 ;
     // 当前正在播放的歌曲
     var  playingFile = null ;
     // 播放模式
     var  playMode = 1 ;
     // 下一首
     this .nextMusic = function (){
        if (playMode == " 1 " ){
            index += 1 ;
        }
         if (index == musicFiles.length){
            index = 0 ;
        }
        playingFile = musicFiles[index];
        media.setAttribute( " src " ,playingFile.url); 
        media.play();
        $( " #ul_musicList " ).children().css({ " background-color " : " #FFF " , " border " : " solid 1px #EEEEEE " , " color " : " #000 " });
        $( $( " #ul_musicList " ).children()[index]).css({ " background-color " : " #2C7DE2 " , " border " : " solid 1px #206DDF " , " color " : " #FFF " });
     
    }
     // 加载
     this . loadStart = function (){
        $( " #sn_status " ).text( " 加载中.... " );
    }
     // 播放
     this . playing = function (){
         $( " #sn_status " ).text( " 当前正在播放： " + playingFile.name);
    } 
     // 暂停
     this . pausePaly = function (){
         $( " #sn_status " ).text( " 暂停： " + playingFile.name);
    }
     // 加载出错
     this . loadError = function (){
        $( " #sn_status " ).text( " 加载“ " + playingFile.name + " ”失败，可能资源不存在~ " );
    }
     // 初始化
     this .init = function (){
         for ( var  a  in  musicFiles){
        $( " #ul_musicList " ).append( " <li> " + musicFiles[a].name + " </li> " );
        }
        _this.nextMusic();
        $( " #slt_playMode " ).change( function (){
        playMode = $( " #slt_playMode " ).val();
        });
    }
}

 

如果您能在下面看到播放器并听到背景音乐，那说明您当前使用的浏览器支持HTML5 。


 示例源码下载（建议使用 Google Chrome测试）

 原文地址：http://www.cnblogs.com/xumingxiang/archive/2010/05/11/1732672.html

作者 : 祥叔
出处： http://xumingxiang.cnblogs.com/
版权：本文版权归作者和博客园共有
转载：欢迎转载，为了保存作者的创作热情，请按要求【转载】，谢谢
要求：未经作者同意，必须保留此段声明；必须在文章中给出原文连接；否则必究法律责任