码迷,mamicode.com
首页 > 其他好文 > 详细

h5播放音乐

时间:2017-06-30 22:25:16      阅读:126      评论:0      收藏:0      [点我收藏+]

标签:height   分享   public   row   图片   add   position   暂停   pac   

h5音频播放,里面參数能够查看http://www.w3school.com.cn/html5/html_5_audio.asp
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
html部分:
<div style="z-index: 999; width: 30px; height: 30px; position: absolute; top: 2%; left: 89%; cursor: pointer;" id="mplay"> 
   <audio autoplay="autoplay" loop="loop" id="audio" src="http://www.eyee.cn/Public/Uploads/images/2015/04/27/699/553df80928571.mp3"> 
<!--    <source src="song.mp3" type="audio/mpeg"></source> -->使用本地音乐
   </audio> 
</div> 
js效果:能够通过点击一张图片来控制音乐的播放和暂停
      var sj_music = true;
      var music = document.getElementById("audio");
      $("#mplay").click(function(){
          if(sj_music){
            $(this).css("background-image","url(images/musicoff.png)");
            music.pause();
            sj_music = false;
          }else{
            $(this).css("background","url(images/musicon.png)");
            music.play();
            sj_music = true;
          }          
      });
效果例如以下:
播放时效果
技术分享
暂停时效果
技术分享

h5播放音乐

标签:height   分享   public   row   图片   add   position   暂停   pac   

原文地址:http://www.cnblogs.com/liguangsunls/p/7100560.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!