微信浏览器中实现音乐自动播放

近日微信浏览器中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");}}}
};

微信浏览器中实现音乐自动播放相关推荐

audio标签有的浏览器不支持音乐自动播放
audio标签有的浏览器不支持音乐自动播放 H5中的audio标签有的IOS设备和安卓设备不支持自动播放,也就是不支持autoplay属性,并且,这些浏览器只支持用户click点击事件触发audio. ...
微信浏览器中控制视频的播放
需求:官网的视频要在微信浏览器中播放,由于微信浏览器不支持自动播放,所以只能手动设置 <div class="globel_view" style="positio ...
移动端H5页面在微信浏览器内audio无法自动播放问题解决
相信许多小伙伴都遇见过这话种情况,在微信浏览器内添加的audio 无法自动播放之前写过好多那种活动页添加的背景音乐都可以自动播放,直到后来ios 增加了限制就出现了这个问题怎么解决的只需给audi ...
解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题
背景制作的H5项目,使用vedio标签,利用wx.getNetworkType来自动播放背景音乐. 但是安卓的vedio自动播放被微信浏览器限制了. 解决方案采用web vedio api 细节解 ...
苹果微信html音乐播放,HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
H5页面在微信浏览器中自动播放视频
H5页面在微信浏览器中自动播放视频安卓和IOS不同 h5在安卓微信浏览器上的视频不能自动播放 h5在iOS微信浏览器上的视频可以自动播放 iOS的实现方案
解决IOS微信中 HTML5 中audio的自动播放问题。
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html lang="en"> <head ...
iphone微信 h5页音乐自动播放
iphone微信 h5页音乐自动播放: // iphone自动播放document.addEventListener("WeixinJSBridgeReady", function ...
uniapp微信公众号h5开发--（微信开发回调、背景音乐自动播放、微信朋友分享、微信扫一扫）一站式踩坑
微信公众号开发,一站式踩坑开发前提:例如你们域名是https://www.baidu.com 配置nginx反向代理,把你项目的端口重定向到你们测试环境或线上环境域名 # 访问https://bai ...

微信浏览器中实现音乐自动播放

微信浏览器中实现音乐自动播放相关推荐

最新文章

热门文章