浏览器通过原生JS实现音频播放控制功能

一. AudioContext介绍

• AudioContext接口表示由链接在一起的音频模块构建的音频处理图，每个模块由一个AudioNode表示。音频上下文控制它包含的节点的创建和音频处理或解码的执行。在做任何其他操作之前，您需要创建一个AudioContext对象，因为所有事情都是在上下文中发生的。建议创建一个AudioContext对象并复用它，而不是每次初始化一个新的AudioContext对象，并且可以对多个不同的音频源和管道同时使用一个AudioContext对象。详情
• AudioContext 兼容写法

createAudioContext() {
   
  if (!window.AudioContext) {
   
    window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
  }
  return new window.AudioContext();
}

二. FileReader介绍

• FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。详情
• FileReader使用模板

let fileReader = new FileReader();
fileReader.onabort= (e) => {
    在读取操作被中断时触发的操作 };
fileReader.onloadstart = (e) => {
    在读取操作开始时触发的操作 };
fileReader.onload = (e) => {
    在读取操作完成时触发的操作 };
fileReader.onerror= (e) => {
    在读取操作发生错误时触发的操作 };
fileReader.onloadend= (e) => {
    在读取操作结束时（要么成功，要么失败）触发的操作 };
fileReader.abort(); // 终止操作.
fileReader.readAsArrayBuffer(data); // 读取指定的 Blob中的内容, 一旦完成, result 属性中保存的将是被读取文件的 ArrayBuffer 数据对象.
fileReader.readAsText(); // 读取指定的Blob中的内容。一旦完成，result属性中将包含一个字符串以表示所读取的文件内容。
...... // 等等其他操作

三. 音频播放执行流程