安卓与IOS播放

安卓可以直接使用audio标签进行播放

<audioref="sound":src="bgm.mp3"loop />

const audio = document.querySelector('audio')
audio.play()

IOS端需要借助微信自带的事件进行播放

const audio = document.querySelector('audio')
document.addEventListener('WeixinJSBridgeReady', () => {audio.play()
}, false)

其他app客户端直接同安卓端一样直接播放
浏览器app部分可能不支持自动播放

安卓与IOS兼容

有Loading页，需要在Loading页之后播放背景音乐时，IOS端依旧无法自动播放，因为自动播放音频依托于微信的WeixinJSBridgeReady的事件，WeixinJSBridgeReady通常发生很快，在Loading页结束之前已经发生，此时可以在WeixinJSBridgeReady时播放一段空音频，等待Loading结束，再播放bgm。

var _audio
var _isWeixinJSBridgeReady = false
document.addEventListener('WeixinJSBridgeReady', () => {_isWeixinJSBridgeReady = true_audio = new Audio()_audio.style.display = 'none'// 播放空音频_audio.src = 'empty.mp3'_audio.play()
}, false)const initMusic = () => {var setInitMuisc = () => {// 播放背景音乐_audio.src = 'bgm.mp3'_audio.play()document.removeEventListener('click', setInitMuisc)document.removeEventListener('touchstart', setInitMuisc)}document.addEventListener('click', setInitMuisc)document.addEventListener('touchstart', setInitMuisc)document.body.click()
}const playMusic = () => {if (!_isWeixinJSBridgeReady && /MicroMessenger/.test(window.navigator.userAgent)) {document.addEventListener('WeixinJSBridgeReady', () => {initMusic()}, false)} else {initMusic()}
}

以下是自己封装好的音频播放，可以参考参考

// MusicPlayer.js
var _audio
var _isWeixinJSBridgeReady = false
document.addEventListener('WeixinJSBridgeReady', () => {_isWeixinJSBridgeReady = true_audio = new Audio()_audio.style.display = 'none'_audio.src = 'empty.mp3'_audio.play()
}, false)var style = document.createElement('style')
style.setAttribute('role', 'm-sdk-MusicPlayer')
style.innerHTML = `
.m-sdk-music-player.play[mode="rotate"],
.m-sdk-music-player.play[mode="reset"] {animation: music-rotate 8s linear infinite;-webkit-animation: music-rotate 8s linear infinite;
}
.m-sdk-music-player.pause[mode="rotate"],
.m-sdk-music-player.pause[mode="reset"] {animation-play-state: paused;-webkit-animation-play-state: paused;
}
.m-sdk-music-player__play,
.m-sdk-music-player__pause {display: none;width: 100%;height: 100%;
}
.m-sdk-music-player.play .m-sdk-music-player__play,
.m-sdk-music-player[mode="rotate"].play .m-sdk-music-player__pause,
.m-sdk-music-player[mode="reset"] .m-sdk-music-player__pause,
.m-sdk-music-player.pause .m-sdk-music-player__pause {display: block;
}
.m-sdk-music-player.play[mode="replace"] .m-sdk-music-player__pause {display: none;
}
@keyframes music-rotate {0%{transform: rotate(0);-webkit-transform: rotate(0);}100%{transform: rotate(1turn);-webkit-transform: rotate(1turn);}
}
`
document.querySelector('head').appendChild(style)
/*** @param {object} options 参数表列* el 所要挂载的元素* src 链接地址* mode 模式 rotate旋转，reset暂停则复位，replace图标切换* loop 是否循环 false* icon 图标链接路径* playIcon 播放时的图标路径* isAutoPlay 是否默认播放 true*/
function MusicPlayer(options) {this.config = Object.assign({}, options)this.isUserPaused = falseif (typeof options.el === 'string') {this._view = document.querySelector(options.el)} else if (options.el instanceof HTMLElement) {this._view = options.el}this._view.classList.add('m-sdk-music-player', 'pause')// this._view.setAttribute('mode', 'rotate')// this._view.setAttribute('mode', 'reset')// this._view.setAttribute('mode', 'replace')this._view.setAttribute('mode', options.mode || 'rotate')this.src = options.srcvar _player = _audio || new Audio()_player.loop = options.loop || false_player.src = this.srcvar pauseIcon = new Image()pauseIcon.src = options.iconpauseIcon.classList.add('m-sdk-music-player__pause')this._view.appendChild(pauseIcon)if (options.mode === 'replace' && options.playIcon) {var playIcon = new Image()playIcon.src = options.playIconplayIcon.classList.add('m-sdk-music-player__play')this._view.appendChild(playIcon)}this._view.addEventListener('click', () => {if (this.paused) {this.play()} else {this.pause()}this.isUserPaused = !this.paused})_player.onplay = () => {this._view.classList.remove('pause')this._view.classList.add('play')}_player.onpause = () => {if (options.mode === 'reset' || options.mode === 'replace') {this._view.classList.remove('play')}this._view.classList.add('pause')}var initMusic = () => {var setInitMuisc = () => {_player.play()document.removeEventListener('click', setInitMuisc)document.removeEventListener('touchstart', setInitMuisc)}document.addEventListener('click', setInitMuisc)document.addEventListener('touchstart', setInitMuisc)document.body.click()}if (options.isAutoPlay === undefined || options.isAutoPlay) {if (!_isWeixinJSBridgeReady && /MicroMessenger/.test(window.navigator.userAgent)) {document.addEventListener('WeixinJSBridgeReady', () => {initMusic()}, false)} else {initMusic()}}this.play = function() {_player.play()}this.pause = function() {_player.pause()}this.replay = function() {_player.replay()}Object.defineProperty(this, 'currentTime', {get: function() {return this._audio && this._audio.currentTime || 0 }})Object.defineProperty(this, 'paused', {get: function() {return this._audio && this._audio.paused}})
}MusicPlayer.prototype.create = function(opt) {return new MusicPlayer(opt)
}export default MusicPlayer

使用方法

import MusicPlayer from 'MusicPlayer'
const player = new MusicPlayer({src: 'bgm.mp3'
})

H5自动播放背景音乐（IOS和安卓）相关推荐

android ios 实时视频播放,vue 移动端视频自动播放兼容ios，安卓
安卓初始化自动播放首先创建一个jsmpeg.js文件,代码源文件放在百度网盘了,请自行下载百度网盘下载地址链接: https://pan.baidu.com/s/1bDvyrEAulMy8aYe ...
H5 自动播放背景音乐
html:<audio id="audio" controls loop autoplay preload hidden><source src="/s ...
解决H5项目微信浏览器安卓系统无法自动播放背景音乐的问题
背景制作的H5项目,使用vedio标签,利用wx.getNetworkType来自动播放背景音乐. 但是安卓的vedio自动播放被微信浏览器限制了. 解决方案采用web vedio api 细节解 ...
微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐最近遇到一个需求一个文章详情页(图文结合) 进入页面后自动播放背景音乐正常用video标签后安卓打开后是自动播放的但是ios是不支持自动播放的经过不懈努力的 ...
uniapp 自动播放背景音乐
uniapp 自动播放背景音乐 1.引入wx js-sdk的js文件 import wxj from "@/static/js/jweixin-1.6.0.js" //这是wx j ...
iphone 微信打开H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题 --由于苹果的ios系统的安全保护较严格,iphone手机打开微信H5的时候(针对于已对audio标签设置 autoplay为true的H5),通常要先点击 ...
HTML 无法自动播放背景音乐
问题描述: 解决移动端访问HTML5 无法自动播放背景音乐原因分析: 苹果为了用户着想,禁止了Autoplay和JS "onload" 加载播放,也就是说即使你在html文件 ...
手机端网页自动播放背景音乐相关资料
做手机端活动页面的时候,经常会遇到打开页面自动播放背景音乐的需求.但是很多开发人员在实现这个需求时会遇到各种各样不能自动播放或有些场景可以有些场景不行的现象,现在总结一下手机端自动播放背景音乐的资料. ...
解决iphone 微信H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题参考文章: (1)解决iphone 微信H5自动播放音乐问题 (2)https://www.cnblogs.com/hlhs/p/11157401.html ...

H5自动播放背景音乐（IOS和安卓）

安卓与IOS播放

安卓与IOS兼容

H5自动播放背景音乐（IOS和安卓）相关推荐

最新文章

热门文章