H5进入页面音乐播放兼容微信，浏览器，APP内嵌

最近公司接到要做个活动页，需要背景音乐要进入页面就播放，H5与浏览器都要兼容，但看了浏览器好像禁止页面进入播放音乐，然后就找各种文档。废话不多说上代码。。。

HTML代码

<input type="hidden" value="<{$system_config.statics_url}>/activity/images/music2.mp3" id="audio">

您的浏览器不支持 audio 元素。

</audio>

<img src="<{$system_config.statics_url}>/activity/images/ic_yy@2x.png" class="audios_icon play_audios" id="paly_btn">

js代码

$(function(){

let videopaly = true;

let startflag = true;

// drawid('tulip','canvas');

var u = navigator.userAgent;

var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1;

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

var android= u.indexOf('Android') > -1 || u.indexOf('Linux') > -1

function BGMAutoPlayMgr/* solveAndroidBGMAutoplay */(url) {

this.audioContext = new (window.AudioContext || window.webkitAudioContext || window.mozAudioContext)();

this.sourceNode = null;

this.buffer = null;

this.isPlayingBGM = false;

this.toggleBGM = function () {

if (typeof this.sourceNode == 'object') {

if (this.isPlayingBGM) {

this.sourceNode.stop();

this.isPlayingBGM = false;

} else this._playSourceNode();

}

this._playSourceNode = function () {

const audioContext = this.audioContext;

audioContext.resume();

const _sourceNode = audioContext.createBufferSource();

_sourceNode.buffer = this.buffer;

_sourceNode.loop = true;

_sourceNode.connect(audioContext.destination);

_sourceNode.start(0);

this.sourceNode = _sourceNode;

this.isPlayingBGM = true;

}

let loadAndAutoPlay = (audioUrl) => {

const audioContext = this.audioContext;

const xhr = new XMLHttpRequest();

xhr.open('GET', audioUrl, true);

xhr.responseType = 'arraybuffer';

xhr.onreadystatechange = () => {

if (xhr.status < 400 && xhr.status >= 200 && xhr.readyState === 4) {

audioContext.decodeAudioData(xhr.response, buffer => {

this.buffer = buffer;

try {

WeixinJSBridge.invoke("getNetworkType", {}, () => this._playSourceNode());

} catch(err){

this._playSourceNode();

}

});

}

xhr.send();

}

loadAndAutoPlay(url);

loadAndAutoPlay = null;

}

//判断是安卓手机和微信环境，是toggleBGM()，不是就调playMusic

if(android || isWeixin ){

//微信

$('#audio').hide()

$('#bgmusic').hide()

const bgm = new BGMAutoPlayMgr(musicUrl+'/activity/images/music2.mp3');

var isPlay=true

$('#paly_btn').click(function(){

if(isPlay){

$(".audios_icon").removeClass("play_audios")

}else{

$(".audios_icon").addClass("play_audios")

}

isPlay=!isPlay

bgm.toggleBGM();

})

} else {

$("audio").attr("src",$("#audio").val());

$('#paly_btn').addClass('play_audios');

playMusic()

}

//苹果浏览器

function playMusic(){

document.body.addEventListener('touchstart', function(){

if(startflag){

startflag = false;

document.getElementById("bgmusic").play();

$('#paly_btn').addClass('play_audios');

videopaly = true;

}

});

document.addEventListener('visibilitychange', function() {

var isHidden = document.hidden;

if (isHidden) {

document.getElementById("bgmusic").pause();

$('#paly_btn').removeClass('play_audios');

videopaly = false;

} else {

document.getElementById("bgmusic").play();

$('#paly_btn').addClass('play_audios');

videopaly = true;

}

});

$("body").on('click','#paly_btn',function(){

if(videopaly){

document.getElementById("bgmusic").pause();

$(this).removeClass('play_audios');

videopaly = false;

} else {

document.getElementById("bgmusic").play();

$(this).addClass('play_audios');

videopaly = true;

}

})

}

})

因为是先下载音乐资源，背景音乐越小越好（我的是1M），不然下载需要时间，出现延迟播放的情况

如有侵权请联系作者删除，谢谢

文档引用解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题_YZHD的博客-CSDN博客

H5进入页面音乐播放兼容微信，浏览器，APP内嵌相关推荐

video.js兼容微信浏览器，（播放.m3u8视频源）解决微信浏览器黑屏问题
video.js兼容微信浏览器,(播放.m3u8视频源)解决微信浏览器黑屏问题一.问题描述: 在h5做根据视频源直播功能时,在浏览器能打开视频,但是在部分安卓机和苹果机在微信浏览器打开会出现黑屏的状 ...
html5微信自动播放视频,科技常识：HTML5页面音视频在微信和app下自动播放的实现方法...
今天小编跟大家讲解下有关HTML5页面音视频在微信和app下自动播放的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5页面音视频在微信和app下自动播放的实现方法的相关 ...
html音视频app制作,怎么实现HTML5页面音视频在微信和app下自动播放
怎么实现HTML5页面音视频在微信和app下自动播放发布时间:2020-09-28 15:52:53 来源:亿速云阅读:90 作者:小新这篇文章给大家分享的是有关怎么实现HTML5页面音视频在微 ...
小程序嵌套h5页面_快速小程序开发之微信小程序内嵌 H5
简介:微信小程序中可以直接运行 web 页面,这一新组件 web-view 的产生,可能直接导致小程序数量迎来一波高峰.本篇博文将从业务选型,微信小程序后台配置,使用 web-view 完成登录业务以 ...
一个PHP文件搞定支付宝系列之手机网站支付（兼容微信浏览器）
网上的很多PHP支付宝支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后给出一个单文件版的,希望可以给各位想接入支付宝支付的带来些许帮助和借鉴意义. 一个PHP文件搞定支付宝系列:ht ...
php 如何用op浏览器开发手机网站,PHP实现手机网站支付（兼容微信浏览器）
网上的很多PHP支付宝支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后给出一个单文件版的,希望可以给各位想接入支付宝支付的带来些许帮助和借鉴意义. 推荐:<PHP视频教程> ...
手机浏览器只保存php文件夹,一个PHP文件搞定支付宝系列之手机网站支付（兼容微信浏览器）...
网上的很多PHP支付宝支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后给出一个单文件版的,希望可以给各位想接入支付宝支付的带来些许帮助和借鉴意义. 在手机浏览器下打开实现效果在微信 ...
一个PHP文件搞定支付宝系列之手机网站支付（兼容微信浏览器）转
网上的很多PHP支付宝支付接入教程都颇为复杂,且需要配置和引入较多的文件,本人通过整理后给出一个单文件版的,希望可以给各位想接入支付宝支付的带来些许帮助和借鉴意义. 一个PHP文件搞定支付宝系列:ht ...
记录：app内嵌H5页面分享到微信后，在安卓手机打开白屏，苹果手机正常渲染的问题始末
**背景:**app内嵌的一个个人名片页面需要分享到微信,测试环境下,分享到微信后,安卓和苹果手机都能正常渲染,生产环境苹果手机没问题,安卓手机打开分享的链接,页面一直空白. **原因分析:**单独加 ...

H5进入页面音乐播放兼容微信，浏览器，APP内嵌

H5进入页面音乐播放兼容微信，浏览器，APP内嵌相关推荐

最新文章

热门文章