标签：ac 播放 音频 音乐 可视化 bs analyser 节点
本文是在慕课网学习了HTML5音乐可视化之后产生的，老师讲解的很详细，建议你先去看一看，我新增了播放控制列表、文件上传大小限制、重复上传文件检测、自动播放下一首，效果图如下:
在线体验地址: https://demo.luckyw.cn/code.h...
源码地址: https://github.com/leoyaojy/d...
Audio API
我将要介绍的HTML5 Audio API与Audio标签是不一样的，Audio标签只是HTML5更语义化的一个表现，而HTML5 Audio API则让我们可以在代码中直接操作原始的音频流数据，对其进行任意加工再造，这里我只涉及到对音频流的分析，从而实现音乐的可视化
一段音频在到达扬声器播放之前，我们可以对其进行拦截得到音频流数据，本文涉及到的是对音量的控制以及对音频流数据的分析，这一切都是基于AudioContext对象来的，所以我们需要创建这个对象，再从这个对象去创建其他音频节点。目前仅Chrome和Firefox对其提供了支持，所以我们仅能在Chrome和Firefox下才能看到效果，为了能同时在这两种浏览器下工作，我们需要做下兼容写法:
window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;页面布局
我采用的是左右两侧布局，左侧播放列表固定宽度300，右侧音乐可视化区域自适应宽度，并在左侧区域添加了控制面板，可以添加音乐、暂停、播放、上一首和下一首歌曲的切换，添加音乐其实是通过一个label标签的for属性指向一个type为file的input文本框，这样更美观，指定multiple这样可以多选文件进行上传，并通过绑定input文本框的onchange事件把选择的音乐文件添加到播放列表中，获取目前的播放状态，如果正在播放，则只单单把音乐添加到播放列表，否则并播放第一首音乐
FileReader读取文件播放
创建一个FileReader对象，从保存音乐文件列表files中以ArrayBuffer读取音频文件，然后监听它的onload事件获取它解析出来的数据result，创建音量控制节点gainNode以及音频分析节点analyser。AudioContext通过解码result数据得到一个buffer数据，然后创建一个bufferSourceNode节点，并设置它的buffer属性为解码之后的buffer，并把它连接到音频分析节点，然后音频分析节点连接到音量控制节点，音量控制节点最后连接到AudioContext的destination上，再通过bufferSourceNode的start方法进行播放，音乐可视化的难点就在于理解这里。最后把这个bufferSourceNode保存到source变量中，设置它的onended事件也即播放结束事件，可以看下下面的图理解下:
var fr = new FileReader();
fr.onload = function (e) {
var result = e.target.result;
gainNode = ac[ac.createGain ? "createGain" : "createGainNode"]();
gainNode.connect(ac.destination);
analyser = ac.createAnalyser();
analyser.fftSize = size;
analyser.connect(gainNode);
ac.decodeAudioData(result, function (buffer) {
var bs = ac.createBufferSource();
bs.buffer = buffer;
bs.connect(analyser);
bs[bs.start ? "start" : "noteOn"]();
source = bs;
}, function (err) {
console.log(err)
});
};
fr.readAsArrayBuffer(files[currIndex]);绘制音频图谱
我们需要创建一个长度为analyser.frequencyBinCount的Uint8Array的数组，然后把实时得到的音频数据赋值给它analyser.getByteFrequencyData(arr)，然后调用draw方法绘制到canvas上，大致就是这样，好好理解之后难度不大
标签：ac,播放,音频,音乐,可视化,bs,analyser,节点 来源： https://www.cnblogs.com/homehtml/p/12906118.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。