iOS无法播放上传的音频。JS MediaRecorder -> Blob -> Django Server -> AWS s3 -> JS decodeAudioData --> "EncodingError:解码失败"

0 人关注

回答: 不应该用JS在浏览器端设置内容/mime类型,应该使用本地浏览器的mimeType,然后在服务器端转换(我用了PyDub)。

我正在使用Javascript MediaRecorder、Django、AWS s3和Javascript Web Audio API为用户录制音频文件,以便彼此分享语音笔记。我在网上看到了关于如何录制和上传音频数据以及Safari/iOS的问题的分散答案,但我认为这可以成为一个主题,把它集中起来,面对一些问题。

Javascript:

mediaRecorder = new MediaRecorder(stream);
mediaRecorder.onstop = function (e) {
    var blob = new Blob(
        chunks,
            type:"audio/mp3",
    var formdata = new FormData();
    formdata.append('recording', blob)
    var resp = await fetch(url, { // Your POST endpoint
        method: 'POST',
        mode: 'same-origin',
        headers: {
        'Accept': 'application/json',
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRFToken': csrf_token,
        body: formdata,

Django。

for k,file in request.FILES.items():
    sub_path = "recordings/audio.mp3"
    meta_data = {"ContentType":"audio/mp3"}
    s3.upload_fileobj(file, S3_BUCKET_NAME, sub_path,ExtraArgs=meta_data)
    ###then some code to save the s3 URL to my database for future retrieval

Javascript:

var audio_context = new AudioContext();
document.addEventListener("#play-audio","click", function(e) {
    var url = "https://docplat-bucket.s3.eu-west-3.amazonaws.com/recordings/audio.mp3"
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function () {
        audio_context.decodeAudioData(request.response, function (buffer) {
            playSound(buffer)
    request.send();
"EncodingError:解码失败"

但是请注意,使用w3学校演示的mp3网址确实可以播放录音。 https://docplat-bucket.s3.eu-west-3.amazonaws.com/recordings/t-rex-roar.mp3

电脑(用于上传重新编码)。Windows 11, Chrome版本98.0.4758.81(官方版本)(64位) Django。版本:3.1.7 手机(用于播放录音):iPhone X,iOS(版本14.7.1) 有问题的网址:https://docplat-bucket.s3.eu-west-3.amazonaws.com/recordings/audio.mp3 工作网址:https://docplat-bucket.s3.eu-west-3.amazonaws.com/recordings/t-rex-roar.mp3

(这是我的第一篇帖子,如果我没有以理想的方式提出这个问题,请原谅我 :))

django
amazon-s3
web-audio-api
audio-recording
web-mediarecorder
F. Bishton
F. Bishton
发布于 2022-02-07
1 个回答
chrisguttandin
chrisguttandin
发布于 2022-02-08
已采纳
0 人赞同

当你上传录制的 Blob ,你将类型设置为 'audio/mp3' 。但除非你使用一个自定义库来修补 MediaRecorder ,否则录制的 mimeType 将是浏览器最喜欢的。

目前,它在Firefox中是 'audio/opus' ,在Chrome中是 'audio/webm'

如果你像这样定义你的 Blob ,它应该可以工作。

var blob = new Blob(
    chunks,