单纯的音乐播放是否过于单调,在听音乐的同时如果也能看见音乐是否更加带感。本课程将带领你使用webAudio和canvas将你的音乐以你喜欢的形式可视化出来,让你的音乐动起来。
课程播放地址:http://www.php.cn/course/327.html
该老师讲课风格:
教师讲课深入浅出,条理清楚,层层剖析,环环相扣,论证严密,结构严谨,用思维的逻辑力量吸引学生的注意力,用理智控制课堂教学进程。学生通过听教师的讲授,不仅学到知识,也受到思维的训练,还受到教师严谨的治学态度的熏陶和感染
本视频中较为难点是HTML5音乐可视化了:
音乐的获取与播放
构建应用的前后端
1,新建媒体数据文件夹,public/media,把音频数据放入其中
2,搭建页面CSS框架,/public/stylesheets/index.css
3,读取页面内容,views/index.ejs
4,后台路由控制,routes/index.js,获取音乐列表并返回给前段
ajax请求服务端音频数据
在javascripts下新建文件index.js,在views/index.ejs引用创建的文件
<script type="text/javascript" src="/javascripts/index.js"></script>
编辑创建文件,实现点击效果
<ul id="list"> <% music.forEach(function(name){ %> <li title="<%= name %>"><%= name %></li> #设置title属性 <% }) %> </ul>
解码并播放音频
AudioContext
包含各个AudioNode对象以及它们的联系的对象,即audio上下文对象。一个document中只有一个AudioContext创建:var ac = new window.AudioContext();
属性:
destination,AudioDestinationNode对象,所有的音频输出聚集地,相当于音频的硬件,所有的AudioNode都直接或间接连接到这里。
currentTime,AudioContext从创建开始到当前的时间(秒)。
方法:
decodeAudioData(arrayBuffer,succ(buffer),err),异步解码包含在arrayBuffer中音频数据
createBufferSource(),创建autioBufferSourceNode对象
createAnalyser(),创建AnalyserNode对象
createGain()/createGainNode(),创建GainNode对象
AudioBufferSourceNode
表示内存中的一段音频资源,其音频数据存储在AudioBuffer中(其buffer属性)
创建:var buffersource = ac.createBufferSource();
属性:
buffer,AudioBuffer对象,表示要播放的音频资源数据
——子属性:duration,该音频资源的时长(秒)
loop,是否循环播放,默认false
onended,可绑定音频播放完毕时调用的时间处理程序
方法:
start/noteOn(when=ac.currentTime,offset=0,buration=buffer.duration-offset),开始播放音频。
when:何时开始播放;
offset:从音频的第几秒开始播放;
duration:播放几秒
stop/noteOff(when=ac.currentTime),结束播放音频
添加音量控制
GainNode
改变音频音量的对象,改变通过它的音频数据所有的sampleframe的信号强度
创建:var gainNode = ac.createGain()/ac.createGainNode();
gain,AudioParam对象,通过改变其value值可以改变音频信号的强弱,默认的value属性值为1,通过最小值为0,最大值为1,其value值也可以大于1,小于0
播放bug修复
问题:播放第二首歌时,第一首歌依然在播放,主要原因是每次点击音乐列表即调用load("/media/"+this.title),数据解码并播放:
xhr.onload = function(){ ac.decodeAudioData(xhr.response, function(buffer){ var bufferSource = ac.createBufferSource(); bufferSource.buffer = buffer; bufferSource.connect(gainNode); bufferSource[bufferSource.start?"start":"noteOn"](0); }, function(err){ console.log(err); }); }
解决方法:
对音频数据赋空值var source = null;,保存上一首歌的解码数据source = bufferSource;,判断执行停止播放source && source[source.stop ? "stop" : "noteoff"](0);
音乐数据可视化
AnalyserNode
音频分析对象,它能实时的分析音频资源的频域和时域信息,但不会对音频流做任何处理
创建:var analyser = ac.createAnalyser();
fftSize,设置FFT(FFT是离散傅里叶变换的快速算法,用于将一个信号变换到频域)值得大小,用于分析得到频域,为32 - 2048之间2的整数倍,默认为2048。实时得到的音频频域的数据个数为FFTSize的一半
frequencyBinCount,FFT值得一半,即实时得到的音频频域的数据个数
getByteFrequencyData(Uint8Array),复制音频当前的频域数据(数量是FrequencyBinCount)到Uint8Array(8位无符号整型类型化数组)中
创建Analyser对象:
var analyser = ac.createAnalyser(); analyser.fftSize = 512; analyser.connect(gainNode);
连接到分
析对象获取数据:bufferSource.connect(analyser);
实现可视化功能函数:
function visualizer(){ var arr = new Uint8Array(analyser.frequencyBinCount); analyser.getByteFrequencyData(arr); console.log(arr); }
调用visualizer函数:
利用canvas将音乐数据可视化(柱状图)
在views下加入id
控制高度变化:
var box = $("#box")[0]; var height, width; var canvas = document.createElement("canvas"); box.appendChild(canvas); function resize(){ height = box.clientHeight; width = box.clientWidth; canvas.height = height; canvas.width = width; } resize(); #调用触发函数 window.onresize = resize;
利用canvas将音乐数据可视化(圆点图)
应用优化
webAudio API
webAudio核心功能封装为对象
以上是HTML5音乐可视化视频教程的资源推荐的详细内容。更多信息请关注PHP中文网其他相关文章!