我正在尝试使用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();
}
使用以下命令在this.audioContext组件中创建constructor：
this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
console.log(this.audioContext)中的request.onload在按下播放之前输出：
......按下播放后：
但是没有播放声音（在Safari中）。
我究竟做错了什么？
我认为您遇到的问题是，一旦您调用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.buffer = buffer之前执行this.source.start(index)。
我希望这有帮助。