safari中使用Web Audio API webkitAudioContext()时没有声音
我正在尝试使用Web Audio API在我的React应用程序中播放声音。
它目前可以在除Safari v12.1以外的所有浏览器中播放声音。
我知道Safari对自动播放有限制，需要用户交互才能播放声音，所以我有一个调用_play()函数的播放按钮：
_play = (url, index) => {
this._getData(url);
this.source.start(index)
}它调用_getData()函数，如下所示：
_getData(url) {
this.source = this.audioContext.createBufferSource();
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';
request.onload = () => {
var audioData = request.response;
console.log(this.audioContext)
this.audioContext.decodeAudioData(audioData, buffer => {
this.source.buffer = buffer;
this.source.connect(this.audioContext.destination);
},
function(e){ console.log("Error with decoding audio data" + e.err); });
}
request.send();
}在component constructor中使用以下命令创建this.audioContext：
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();request.onload内部的console.log(this.audioContext)在按play之前会输出以下内容：
在按下play后执行...and：
但是没有声音在播放(在Safari中)。
我做错了什么？
回答 1
Stack Overflow用户
发布于 2019-04-29 03:20:02
我认为您遇到的问题是，一旦调用start()，Safari就不再允许您修改缓冲区。
例如，当您按下播放按钮时，下面的页面确实会在Safari中播放一秒钟的噪音。
<!DOCTYPE html>
<html>
<body>
<button id="play-button">play</button>
<script>
document
.getElementById('play-button')
.addEventListener('click', () => {
const audioContext = new AudioContext();
const audioBufferSourceNode = audioContext.createBufferSource();
const sampleRate = audioContext.sampleRate;
const audioBuffer = audioContext.createBuffer(1, sampleRate, sampleRate);
const channelData = audioBuffer.getChannelData(0);
for (let i = 0; i < sampleRate; i += 1) {
channelData[i] = (Math.random() * 2) - 1;
}
audioBufferSourceNode.buffer = audioBuffer;
audioBufferSourceNode.connect(audioContext.destination);
audioBufferSourceNode.start(audioContext.currentTime);
});
</script>
</body>
</html>但是如果你稍微修改它，它就不再起作用了。在分配缓冲区之前启动audioBufferSourceNode时，将不再有输出。
audioBufferSourceNode.connect(audioContext.destination);
audioBufferSourceNode.start(audioContext.currentTime);
audioBufferSourceNode.buffer = audioBuffer;我猜你可以通过等待HTTP响应和音频解码来让你的代码工作，然后再开始源码。请确保在执行this.source.start(index)之前先执行this.source.buffer = buffer。
我希望这能帮到你。
https://stackoverflow.com/questions/55892820
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号