无法从移动 Chrome 中的 blob url 读取音频

Question

我想在我的移动网络应用程序中使用 mp3 播放，所以我编写了一个测试应用程序，我使用了 this 解决方案，但在正确读取文件时，blob URL 似乎已损坏且为空。

<input type="file" accept=".mp3" onchange="autoplay()">
<script>
    var file, url, audio, source;
function autoplay(){
    window.URL = window.URL || window.webkitURL;
    file = document.querySelector("input[type=file]").files[0];
    url = decodeURIComponent(window.URL.createObjectURL(file));
    audio = document.createElement("audio");
    source = document.createElement("source");
    source.src = url;
    audio.appendChild(source);
    document.body.appendChild(audio);
    audio.play();
}
</script>

Blob 大小错误，我放了更大的文件

编辑：

我使用旧版本的 FileReader，也许这不是一个好的选择，但它可以工作......

Answer 1

不要使用decodeURIComponent，只需使用URL.createObjectURL

window.URL = window.URL || window.webkitURL;

function autoplay(evt) {
  var file = document.querySelector("input[type=file]").files[0];
  var url = URL.createObjectURL(file);
  var audio = new Audio();
  audio.src = url;
  audio.play().catch(function(err){
    console.error(err) // could not play audio
  });
  audio.controls = true;
  document.body.appendChild(audio);
}

document.querySelector("input[type=file]").onchange = autoplay

<input type="file" accept=".mp3">

顺便说一句，我直接播放有问题，这很奇怪，因为 event.isTrusted 是真的，这就是我将音频附加到 DOM 的原因