Fork me on GitHub

H5中插入音乐,点击控制播放

html设置:

<link rel="prefetch" href="demo.mp3">

<audio id="Jaudio" class="media-audio" src="demo.mp3" preload loop="loop"></audio >
<div id="audioPlay" class="animated"></div>
js设置:
function audioAutoPlay(id) {
 var audio = document.getElementById(id);
 audio.play();
 document.addEventListener("WeixinJSBridgeReady", function() {
 audio.play();
 }, false);
};

function audioAutoStop(id) {
 var audio = document.getElementById(id);
 audio.pause();
 document.addEventListener("WeixinJSBridgeReady", function() {
 audio.pause();
 }, false);
};
audioAutoPlay('Jaudio');

$("#audioPlay").on('click', function() {
 var audioPlayer = document.querySelector('audio#Jaudio');
 if (audioPlayer.paused) {
 audioAutoPlay('Jaudio');
 $("#audioPlay").css("animation-play-state", "running")
 } else {
 audioAutoStop('Jaudio');
 $("#audioPlay").css("animation-play-state", "paused")
 }
})
支持作者