2021-08-31JSP项目中，audio标签 IOS端无法播放音频

目录

背景

老项目（JSP）维护，新增了语音播放功能，要兼容IOS和安卓，在微信端。

如何实现

最简单的实现形式：

<audio src="${rsp}/resources/sounds/xxxx.mp3" id="sound_bgm" preload="auto" autoplay="autoplay" loop="loop"></audio>

audio标签属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时，重新开始播放
muted	muted	规定视频输出应该被静音
preload	preload	如果出现该属性，则音频在页面加载时，继续进行加载，并预备播放。如果使用了"autoplay"则忽略该属性
src	url	要播放的音频的URL
width/high-配合controls后可以在页面显示音频组件，可用于日常调试使用。

其他项目中的实现形式

参考链接：vue项目，解决ios下audio无法播放问题

遇到问题：IOS端无法播放而安卓端和PC端一切正常

先把音频组件放开，查看是不是音源的问题！！！
引入的音频文件，比如原文件是m4a格式，手动改后缀后，PC和安卓端可用，但是苹果端是不可用的！
第一次见到时，以为是IOS的兼容性问题，导致无法播放音频。
于是开始寻找兼容性方法去解决。
在网上找到，IOS和微信浏览器已经阻止了audio等标签的autoplay事件。需要用户在click事件或者touch事件执行audio.play()才能播放。
ajax回调中的audio.play()音乐也不能正常播放。

// 预先加载资源
this.$refs.audio.load(); //IOS9以后
if(this.isIOS()){
	this.$refs.audio.play();
	this.$refs.audio.pause();
}
// ajax成功后的事件
this.$refs.audio.pause();
this.$refs.audio.currentTime = 0;
this.$refs.audio.play();

在微信浏览器环境下
function autoPlay(id){
	var audio = document.getElementById(id);
	audio.play();
	document.addEventListener("WeixinJSBridgeReady", function(){
	audio.play();
}, false)
	document.addEventListener("YixinJSBridgeReady",function(){
	audio.play()
}, false)
}
autoPlay('music')

参考链接：
1.https://www.jb51.net/article/129503.htm
2.

引用文本

上文中，引入了错误的音源。