初识HTML5 Web Audio API

时间 2019-11-22

标签 html5 html web audio api 栏目 HTML5 繁體版

原文原文链接

前言

自从上次在趣讲CDN一文中讲了一个"传东奶"的故事以后，就再也没有发过博客。或许有些朋友还觉得咱们被抓了呢，哈哈哈~javascript

好久之前，赵忠祥老师就告诉咱们，雨季，是个好时节。雨季来了，春暖花开，万物复苏，又到了大草原上程序猿们XX的季节。好吧，扯远了。说到底，就是团队中的小哥哥小姐姐都忙着谈恋爱，都没时间写博客了。html

获取音频的时长

有这样的一个需求，上传一个音频文件，同时获取其大小及时长。html5

常规方法

这很简单，使用记忆中的那些方法，写出下面的代码：java

function getAudioDuration(url) {
  const audio = document.createElement('audio');
  audio.src = url;
  audio.addEventListener("canplay", function () {
		console.log(audio.duration);
  });
}

const file = document.getElementById('file');
file.addEventListener('change', (e) => {
  const file = e.target.files[0];
  console.log(file.size);
  getAudioDuration(URL.createObjectURL(file));
})
复制代码

当我撸完上面这段代码的时候，回想起总工的批判：这方案太简单了。菊花一紧，吓得我赶忙找找其余的方案。git

ArrayBuffer

在电脑中，当咱们选中一个MP3文件的时候，一般能够看到一些元信息，好比播放时长、采样速率等。既然如此，咱们是否能够经过读取二进制数据来获取对应的信息呢？github

在查询相关资料以后，发现了decodeAudioData这个API能够知足咱们的需求，因而有了下面的方案。web

function getAudioDurationByAudioApi(file) {
    const fileReader = new FileReader();
    const audioContext = new AudioContext();
    fileReader.readAsArrayBuffer(file);
    fileReader.onload = () => {
        audioContext.decodeAudioData(fileReader.result, (result) => {
            console.log(result);
        });
    }
}

const file = document.getElementById('file');
file.addEventListener('change', (e) => {
    const file = e.target.files[0];
    console.log(file.size);
    getAudioDurationByAudioApi(file);
})
复制代码

被忽略的Web Audio API

经过以上的探索，发现了一直被我忽略的Web Audio API。以往在处理音频相关的需求，大可能是经过audio标签，播放一段音频，很简单。因此也就没有关注到早已存在的Audio API。canvas

举个栗子

实际应用一下，举个简单的播放音频栗子：api

function playAudio(file) {
    const fileReader = new FileReader();
    const audioContext = new AudioContext();
    fileReader.readAsArrayBuffer(file);
    fileReader.onload = () => {
        audioContext.decodeAudioData(fileReader.result, (result) => {
          //建立播放源
          const source = audioContext.createBufferSource();
          source.buffer = result;
          //链接输出终端
          source.connect(audioContext.destination);
          //开始播放
          source.start();
        });
    }
};

const file = document.getElementById('file');
file.addEventListener('change', (e) => {
    playAudio(e.target.files[0]);
});
复制代码

以上例子简单使用相关的API进行了音频的播放，分析一下关键的代码。wordpress

AudioContext

直接翻译，就是"音频上下文"。相似于canvas中的context。其中包含了一系列用来操做音频的API。

上面的代码中，经过const audioContext = new AudioContext();建立了一个AudioContext对象，因而咱们就能够进行各类各样的操做。

建立播放源

上面的例子中，咱们经过AudioContext.createBufferSource()建立了播放源。除此以外，咱们还可使用其余的数据做为播放源：

具体介绍可点击连接查看。

链接输入输出

咱们能够看到，在设置好播放源以后，进行了一个connect操做。这个操做就是将播放源连接到播放终端。

AudioContext的destination属性返回一个AudioDestinationNode表示context中全部音频（节点）的最终目标节点，通常是音频渲染设备，好比扬声器。

有趣的玩法

在学习AudioContext相关API的过程当中，发现了createAnalyser这个方法。

createAnalyser方法能建立一个AnalyserNode，能够用来获取音频时间和频率数据，以及实现数据可视化。

要看看效果吧，demo

之前，须要标识一个音频正在播放，咱们常常会放一个跳动的gif。好比：

是的，这一点都不酷。不由又回想起总工的那句话：这方案太简单了。

之后，咱们再作这样的需求的时候，就能够作成跟随音乐频率跳动的动画效果了。

总结

鲁迅先生说："历来如此，便对吗？"

是啊，咱们应该对现有方案多点思考。

以上所述，仅仅只是Web Audio API的冰山一角，还有更多高级的玩法，有兴趣的能够查看相关的文档。

@Author：TDGarden