qcby146 2017-04-09 14:29 采纳率: 0%
浏览 1608
已结题

请问如何将以下代码整合成一个?我想做个3首音乐挨个播放,然后增加一个暂停按钮。请问该怎么做?




<script type="text/javascript">
    window.onload = function(){
        var arr = ["music/gbqq.mp3","music/hmg.mp3","music/zmczx.mp3"];//把需要播放的歌曲从后往前排
        var myAudio = new Audio();
        myAudio.preload = true;
        myAudio.controls = true;
        myAudio.src = arr.pop();//每次读数组最后一个元素
        myAudio.addEventListener('ended', playEndedHandler, false);
        myAudio.play();
        document.getElementById("audioBox").appendChild(myAudio);
        myAudio.loop = false;//禁止循环,否则无法触发ended事件
        function playEndedHandler(){
        myAudio.src = arr.pop();
        myAudio.play();
        console.log(arr.length);
        !arr.length && myAudio.removeEventListener('ended',playEndedHandler,false);//只有一个元素时解除绑定
        }
    }
    var v = document.getElementById('music2');
        v.volume = 0.2;
function playPause() {  
    var music = document.getElementById('music2');    
    var music_btn = document.getElementById('music_btn2');
    if (music.paused){    
        music.play();    
        music_btn.src = 'image/GIF2.gif';    
    }    
    else{    
        music.pause();    
        music_btn.src = 'image/music_off.png';     
    }    
}
</script>
<body>

     <div class="yy"><audio id="music2"  loop autoplay>你的浏览器不支持audio标签。</audio>     
<a href="javascript:playPause();" title="播放/暂停"><img src="image/GIF2.gif" width="44" height="44" id="music_btn2" border="0"><div id="audioBox"></div></a>
 </div>


</body>

图片说明如图所示,只想要个音乐图标控制 音乐播放与暂停。下面那个控制台删除,求大神帮帮忙,我给 朋友做个生日网页。谢谢了、

  • 写回答

5条回答 默认 最新

  • qcby146 2017-04-09 14:35
    关注
    window.onload = function(){ var arr = ["music/gbqq.mp3","music/hmg.mp3","music/zmczx.mp3"];//把需要播放的歌曲从后往前排 var myAudio = new Audio(); myAudio.preload = true; myAudio.controls = true; myAudio.src = arr.pop();//每次读数组最后一个元素 myAudio.addEventListener('ended', playEndedHandler, false); myAudio.play(); document.getElementById("audioBox").appendChild(myAudio); myAudio.loop = false;//禁止循环,否则无法触发ended事件 function playEndedHandler(){ myAudio.src = arr.pop(); myAudio.play(); console.log(arr.length); !arr.length && myAudio.removeEventListener('ended',playEndedHandler,false);//只有一个元素时解除绑定 } } var v = document.getElementById('music2'); v.volume = 0.2; function playPause() { var music = document.getElementById('music2'); var music_btn = document.getElementById('music_btn2'); if (music.paused){ music.play(); music_btn.src = 'image/GIF2.gif'; } else{ music.pause(); music_btn.src = 'image/music_off.png'; } }

     <div class="yy"><audio id="music2"  loop autoplay>你的浏览器不支持audio标签。</audio>     
    


    
    
    评论

报告相同问题?

悬赏问题

  • ¥50 永磁型步进电机PID算法
  • ¥15 sqlite 附加(attach database)加密数据库时,返回26是什么原因呢?
  • ¥88 找成都本地经验丰富懂小程序开发的技术大咖
  • ¥15 如何处理复杂数据表格的除法运算
  • ¥15 如何用stc8h1k08的片子做485数据透传的功能?(关键词-串口)
  • ¥15 有兄弟姐妹会用word插图功能制作类似citespace的图片吗?
  • ¥200 uniapp长期运行卡死问题解决
  • ¥15 latex怎么处理论文引理引用参考文献
  • ¥15 请教:如何用postman调用本地虚拟机区块链接上的合约?
  • ¥15 为什么使用javacv转封装rtsp为rtmp时出现如下问题:[h264 @ 000000004faf7500]no frame?