gpt4 book ai didi

safari - 在 Safari 中通过 Blob URL 加载音频失败

转载 作者:行者123 更新时间:2023-12-03 23:55:19 25 4
gpt4 key购买 nike

以下代码适用于 Chrome (22.0) 但不适用于 Safari (6.0)

<!DOCTYPE html>
<html>
<head>
<script>
function onGo(e) {
var fr = new FileReader();
var file = document.getElementById("file").files[0];
fr.onload = function(e) {
var data = new Uint8Array(e.target.result);
var blob = new Blob([data], {type: 'audio/mpeg'});
var audio = document.createElement('audio');
audio.addEventListener('loadeddata', function(e) {
audio.play();
}, false);
audio.addEventListener('error', function(e) {
console.log('error!', e);
}, false);
audio.src = webkitURL.createObjectURL(blob);
};
fr.readAsArrayBuffer(file);
}
</script>
</head>
<body>
<input type="file" id="file" name="file" />
<input type="submit" id="go" onclick="onGo()" value="Go" />
</body>
</html>

在 Safari 中,不会调用回调(loadeddata 或 error)。
使用的内容是一个mp3文件,通常用音频标签播放。
Safari 需要特别照顾吗?

最佳答案

许多年后,我相信 OP 中的示例应该可以正常工作。只要您在创建 blob 时以某种方式设置了 mime 类型,就像上面的 OP 使用传入的选项的 type 属性所做的那样:

new Blob([data], {type: 'audio/mpeg'});

您也可以使用 <source>元素内部的音频元素并设置 type <source> 的属性元素。我在这里有一个例子:

https://lastmjs.github.io/safari-object-url-test

这是代码:
const response = await window.fetch('https://upload.wikimedia.org/wikipedia/commons/transcoded/a/ab/Alexander_Graham_Bell%27s_Voice.ogg/Alexander_Graham_Bell%27s_Voice.ogg.mp3');

const audioArrayBuffer = await response.arrayBuffer();
const audioBlob = new Blob([audioArrayBuffer]);
const audioObjectURL = window.URL.createObjectURL(audioBlob);

const audioElement = document.createElement('audio');

audioElement.setAttribute('controls', true);
document.body.appendChild(audioElement);

const sourceElement = document.createElement('source');

audioElement.appendChild(sourceElement);

sourceElement.src = audioObjectURL;
sourceElement.type = 'audio/mp3';

我更喜欢在创建 blob 时只设置它的 mime 类型。 <source>元素 src属性/属性不能动态更新。

关于safari - 在 Safari 中通过 Blob URL 加载音频失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13231915/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com