近日微信浏览器中h5页面实现音乐自动播放,试了好多方法,最后还是下面方法比较好用
引入微信sdk
<script src="http: //res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
var $myaudio;
function getMusic(el, showMusic = true) {
var className = 'play'
// var trigger = 'ontouchend' in document ? 'touchstart' : 'click'
var $musci = document.createElement('div')
$myaudio = document.createElement('audio')
// function start() {
// document.removeEventListener(trigger, start, false)
// if (!$audio.paused) return
// // $audio.play()
// }
function toggle() {
if (!$audio.paused) return $audio.pause()
$myaudio.currentTime = 0
$myaudio.play()
}
function play() {
$musci.classList.add(className)
}
function pause() {
$musci.classList.remove(className)
}
$musci.className = 'music-icon'
$myaudio.src = '';
$myaudio.loop = true;
document.body.appendChild($musci)
$myaudio.setAttribute("id", "music");
document.getElementById(el).appendChild($myaudio)
$myaudio.addEventListener('play', play, false)
$myaudio.addEventListener('pause', pause, false)
$myaudio.addEventListener('ended', pause, false)
$musci.addEventListener('click', toggle, false)
if (showMusic) {
$myaudio.load();
$myaudio.play();
document.addEventListener("WeixinJSBridgeReady", function () {
$myaudio.load();
$myaudio.play();
}, false);
// document.addEventListener(trigger, start, false)
}
}
export default getMusic
在vue文件中
export default {
data() {
return {
showMp3: localStorage.getItem("showMp3") == "true" ? true : false,
};
},
mounted() {
if (!document.getElementById("music")) {
if (!this.showMp3) {
getMusic("mc_play", false);
} else {
getMusic("mc_play");
}
}
}
};