h5播放音乐

来源：互联网发布：chrome淘宝比价插件编辑：程序博客网时间：2024/05/17 02:34

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;          }                });

效果如下：

播放时效果

暂停时效果

0 0