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。
          更多详细属性：asp"> 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 >
    p>
  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 />
  p style=" margin-top:5px"> 歌曲列表：/p>
    ul id="ul_musicList"  >
  /ul>
 p style="width:300px; text-align:right">
       播放模式:select id="slt_playMode">
            option value="1"> 全部循环/option>
            option value="2"> 单曲循环/option>
        /select>
        /p>
  /p>
/body>

 
  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://up.2cto.com/2012/0327/20120327094903323.rar

 

 作者  祥叔

关于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。
          更多详细属性：asp"> 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 >
    p>
  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 />
  p style=" margin-top:5px"> 歌曲列表：/p>
    ul id="ul_musicList"  >
  /ul>
 p style="width:300px; text-align:right">
       播放模式:select id="slt_playMode">
            option value="1"> 全部循环/option>
            option value="2"> 单曲循环/option>
        /select>
        /p>
  /p>
/body>

 
  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://up.2cto.com/2012/0327/20120327094903323.rar

 

 作者  祥叔

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！