在iPad上同时使用audio标签与AudioContext播放的音效会出现的问题，求解答？
audio标签播放音频后，在iPad（目前只发现在iPad上，而且高中低端型号都会出现）上会造成后续使用AudioContext播放的音效出现的问题（播放速率莫名变慢）
相关测试代码
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>audio test</title>
<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<style>
html,
body {
background: #aaa;
padding: 0;
border: 0;
margin: 0;
height: 100%;
}
.audio-btn {
display: block;
width: 100px;
height: 100px;
background: #999;
}
</style>
</head>
<body>
<div>
<button class="audio-btn audio-html-btn">
audio tag
<audio class="audio" src="https://teacher-media.vipkid.com.cn/class/homework/file/b445fdfa-d586-4999-9ec0-fb407735fbe8.mp3" preload="auto"></audio>
</button>
</div>
<button class="audio-btn audio-btn-html" style="background: #000;">
<span style="color:#fff">play webAudio</span>
</button>
<script>
// 页面中普通audio标签播放
let btn = document.querySelector('.audio-html-btn')
let audio = document.querySelector('.audio')
btn.addEventListener('click', function () {
audio.play()
})
// 普通web audio 播放
let btn2 = document.querySelector('.audio-btn-html')
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
var request = new XMLHttpRequest();
var bufferArr = null
request.open('GET', 'https://teacher-media.vipkid.com.cn/class/homework/file/e2598a9a-f6bd-4132-bcf6-8b1e5dc2757f.mp3', true);
request.responseType = 'arraybuffer';
//下面就是对音频文件的异步解析
request.onload = function () {
context.decodeAudioData(request.response, function (buffer) {
bufferArr = buffer
});
}
request.send();
btn2.addEventListener('click', function () {
var source = context.createBufferSource();
source.buffer = bufferArr;// 告诉音频源 播放哪一段音频
source.connect(context.destination);// 连接到输出源
source.start(0);//开始播放
console.log('我被播放了2', context, source)
})
</script>
</body>
</html>测试代码说明：只要是先点击页面中的 audio tag触发audio播放音频，后续点击play webAudio使用web audio来播放音频就会出现声音变慢。
测试用的音频资源，mp3格式，audio tag 使用的音频 位速率80kbps；采样速率16kHz。web audio 使用的音频 位速率96kbps；采样速率44.1kHz。
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论