我正在修改一个脚本来播放我在 Codepen 上找到的 mp3,以使其能够在 Safari 上运行。在 Firefox 和 Chrome 中它工作正常,但 Safari 抱怨:“未处理的承诺拒绝:类型错误:没有足够的参数
索引.html:25"
我读了https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html这涉及到比我需要的更高级的东西。我只想播放 mp3 中的声音。不过,我需要网络音频,因为这是让它在 iOS Safari 上工作的唯一方法。
有谁知道如何让 Safari 开心吗?
https://codepen.io/kslstn/full/pagLqL https://codepen.io/kslstn/full/pagLqL
(function () {
if('AudioContext' in window || 'webkitAudioContext' in window) {
// Check for the web audio API. Safari requires the webkit prefix.
const URL = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/Yodel_Sound_Effect.mp3';
var AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext(); // Make it crossbrowser
const playButton = document.querySelector('#play');
let yodelBuffer;
window.fetch(URL)
.then(response => response.arrayBuffer())
.then(arrayBuffer => context.decodeAudioData(arrayBuffer))
.then(audioBuffer => {
yodelBuffer = audioBuffer;
});
playButton.onclick = () => play(yodelBuffer);
function play(audioBuffer) {
const source = context.createBufferSource();
source.buffer = audioBuffer;
source.connect(context.destination);
source.start();
}
}
}());
<button id="play">Yodel!</button>
Safari(Webkit) 不支持 BaseAudioContext.decodeAudioData() 基于 Promise 的语法。请参阅以下链接详细的浏览器兼容性
https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/decodeAudioData https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/decodeAudioData
因此,您需要使用旧的回调语法,如下所示。它适用于高于 6.0 的 Safari 和高于 10 的 Chrome
window.fetch(URL)
.then(response => response.arrayBuffer())
.then(arrayBuffer => context.decodeAudioData(arrayBuffer,
audioBuffer => {
yodelBuffer = audioBuffer;
},
error =>
console.error(error)
))
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)