首页web前端 › 【新萄京手机版官网】HTML伍花费学习(壹):使用aduio标签创设音乐播放器

【新萄京手机版官网】HTML伍花费学习(壹):使用aduio标签创设音乐播放器

 示例源码下载(提议接纳 谷歌 Chrome测试)

</script>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<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:伍px">歌曲列表:</div>
    <ul id="ul_musicList"  >
  </ul>
 <div style="width:300px; text-align:right">
       播放方式:<select id="slt_playMode">
            <option value="一">全体循环</option>
            <option value="二">单曲循环</option>
        </select>
        </div>
  </div>
</body>
</html>

js代码 :<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360音乐导航</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box
{
width:900px;
height: 40px;
border: 1px solid #dddddd;
margin: 100px auto;
overflow: hidden;
}
#oUl
{
width: 910px;
margin-left: -4px;
}
#oUl li
{
float: left;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background:url("images/_r1_c1.png") no-repeat 0 0;
border-right:1px dashed #cccccc;
position: relative;
}
#oUl li a
{
text-decoration: none;
font-size: 13px;
color: #000;
}
span
{
width: 100px;
height: 40px;
background: deepskyblue;
position: absolute;
left: 0;
top: 40px;
z-index: -1;
}
</style>
</head>
<body>
<div id="box">
<ul id="oUl">
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a1.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a2.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a3.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a4.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a5.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a6.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a7.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a8.mp3"></audio>
</li>
<li>
<a href="#">音乐导航</a>
<span></span>
<audio src="source/a9.mp3"></audio>
</li>
</ul>
</div>
</body>
<script src="js/MyFunc1.js"></script>
<script>
function $(symId) {
return document.getElementById(symId);
}
window.onload = function () {
//var lis = $('oUl').document.getElementsByName('li');
//var oSpan = lis.children[1];
var oUl = $('oUl');
var lis = oUl.children;
//当li 被over 的时候
for (var i = 0; i < lis.length; i++) {
//给 li 里面包车型地铁敏锐图 定位加多进去
if (i==0) {
lis[i].style.backgroundPosition = '0 0';
}
else{
lis[i].style.backgroundPosition = '0' + i * (-40)+'px';
}
//当li 被over的时候 它 的第3个子女动画展现
lis[i].onmouseover = function () {
// alert(0);
//for (var i = 0; i < lis.length; i++) {
//lis[i].children[1].style.top = 40;
// }
//this.children[1].style.top =0;
buffer(this.children[1],{top:0}, function () {//音乐是区别的事件源
所以不一致放这里
// buffer(lis[this.index -
1].children[1],{top:40})//这里不能够搞再而三触发的卡通片效果
//因为不是同3个事变
});
this.children[2].play();
//最终发掘 的主题素材 大家理应让下贰遍播放音乐从0起始
this.children[2].currentTime = 0;

 原来的书文地址:

        };
        //当鼠标离开的时候当前的li 的 第二个孩子动画消失
        lis[i].onmouseout = function () {
            buffer(this.children[1],{top:40})
        }
    };
    //当点击键盘的时候 发生的事件
    document.onkeydown = function (event) {
        var event = event ||window.event;
     // console.log(event.onkeydown);
        console.log(event.keyCode);
        //首先 keyCode(标准的键码表)是没有0的.从1 -  9  分别对应的是49 - 57.
        // 但是现在我们需求获取的是0 开始 . 也就是说 keyCode = 48;所以标准键码表keyCode减去对应的值既 最小的值 49 就等于0 l
        // 键盘上的 1 数字对应的是49
        //就是说 从0 - 9 ,对应的是48 - 57
        //那么现在的keyCode 指的就是myCode
        var myCode = event.keyCode - 49; //这样第一个就是从 0 开始
        //keyCode  获取得到的是数字  所以当点击 0 -9 的时候 让对应的li触发事件就可以
        //让ospan显示动起来这里也还是跟手动的效果一样,所以用缓动动画
        buffer(lis[myCode].children[1],{top:0}, function () {
            buffer(lis[myCode].children[1],{top:40});//这里就可以用连续触发的动画 ,因为每点击键盘触发的同时也离开
        });
        //让音乐同时响起
        lis[myCode].children[2].play();
        //最后发现 的问题 我们应该让下一次播放音乐从0开始
        this.children[2].currentTime = 0;
    }
}

 

图片.png

新萄京手机版官网 1新萄京手机版官网 2MusicBox.js

新萄京手机版官网 3

  </audio>

MusicBox=function (){
    var _this=this;
    var  media= document.getElementById("musicBox"); 
    var  musicFiles=[
                   {name:"犯错",url:" ,
                   {name:"Smart的双翅",url:",
                   {name:"无名氏轻音乐",url:",
                   {name:"草泥马之歌",url:"
                   {name:"相思风雨中",url:"
                   ];
    //当前正值播放的歌曲的索引               
    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();
        });
    }
}

   新萄京手机版官网 4

作者 : 徐明祥
出处: 
版权:本文版权归小编和天涯论坛共有
转发:接待转发,为了保留小编的编写热情,请按供给【转发】,多谢
须求:未经小编同意,必须保留此段申明;必须在小说中提交原作连接;不然必究法律权利

  关于html5的炒作已经有1段时间了,表哥亦是个跟风之人,对该非常事物也洋溢好奇和愿意。本文为该连串(HTML5尝鲜)第三节,先以贰个简约的demo清热,希望能勾起各位同学对html5的志趣和关怀。

   audio 有多少个属性:
          src:String型,所播放音频的 url。
          autoplay:bool型,若是是
true,则音频在就绪后立马播放。默以为false。
          controls:bool型,借使是
true,则向用户展现控件,比方播放按钮。暗许为false。
         
越来越多详细属性:

  上边是四哥用audio做的四个音乐播放器的分界面,先睹为快:

转载本站文章请注明出处:新萄京娱乐网址2492777 http://www.cdhbjs.com/?p=3460

上一篇:

下一篇:

相关文章