如何修复通过file input加载音频后无法正常播放的问题

问题修复方案 #

你遇到的播放失败问题由两处核心代码错误导致，对应修复方式如下：

1. 修复Blob实例化传参错误

Blob构造函数要求第一个参数为包含二进制数据的数组，你当前直接传入Uint8Array类型的返回值，导致生成的Blob内容格式错误，音频无法被解析。
将对应代码修改为：

// 给binary外层包裹数组即可
const blob = new Blob([binary], {type: input.files[0].type });

2. 调整音频播放时机，增加异常捕获

给audio标签设置src后，需要等待音频资源加载完成才能触发播放，同时现代浏览器限制非用户交互触发的自动播放，需要对play返回的Promise做异常捕获：

const recordedAudioComponent = document.getElementById(`recordedAudio-instruct-${component}`);
// 监听音频可播放事件后再调用播放，once保证只触发一次
recordedAudioComponent.addEventListener('canplay', () => {
  recordedAudioComponent.play().catch(err => {
    console.error('播放失败，请点击页面后重试：', err);
  });
}, { once: true });

冗余逻辑优化建议 #

你当前转DataURI再转二进制的流程完全可以省略，input选中的文件本身就是File类实例，继承自Blob，可以直接生成对象URL，简化后代码如下：

fileInput.on('change', readFile);

function readFile(e) {
    const input = e.target;
    if(input.files && input.files[0]) {
        const audioFile = input.files[0];
        recordedAudioComponent.src = URL.createObjectURL(audioFile);             
        data.instructAudios[component] = audioFile;
    }
}

该方案省去了编解码的性能损耗，也避免了转码过程中可能出现的格式错误。

内容的提问来源于stack exchange，提问作者Sara Ree