【项目】H5打造可视化音乐播放器

时间:2024-02-21 09:11:45

应用核心结构介绍

clipboard.png

应用技术栈

  • 服务端:Node+Express+ejs

  • 前端界面:HTML+CSS(CSS3)+JS

  • 音频操作:webAudio

  • 音频数据可视化:Canvas

项目构建

  1. 全局安装express:npm install -g express-generator

  2. 使用ejs模板引擎,新建项目music:express --view=ejs music

  3. 进入项目目录安装依赖:cd music && npm install

  4. 安装项目变动实时监控工具:npm install -g supervisor

  5. 启动服务并检查项目是否成功创建:supervisor bin/www && 观测默认3000端口127.0.0.1:3000

详析重要API

  1. AudioContext对象:可理解为audio上下文对象,包含AudioNode对象以及它们的联系的对象,一般情况下,一个document中只有一个AudioContext对象,主要用到其两个属性四个方法:

  • destination属性:AudioDestinationNode对象,所有音频输出聚集地,相当于音频的硬件,所有AudioNode都直接或间接连接到这里

  • currentTime属性:AudioContext从创建开始到当前的时间(秒)

  • decodeAudioData(arrayBuffer,succ(buffer),err)方法:异步解码包含在arrayBuffer中音频数据

  • createBufferSource()方法:创建AudioBufferSourceNode对象

  • createAnalyser()方法:创建AnalyserNode对象

  • createGain()/createGainNode()方法:创建GainNode对象

  1. AudioBufferSourceNode对象,表示内存中的一段音频资源,其音频数据存储在AudioBuffer的buffer属性中,其有三个属性:

  • buffer属性,AudioBuffer对象,表示要播放的音频资源数据,子属性:duration,表示该音频资源的时长

  • loop属性,是否循环播放,默认为false

  • onenload属性,绑定音频播放完毕调用的事件处理程序

  • start/noteOn(when=ac.currentTime,offset=0;duration=buffer.duration-offset),开始播放音频

  • stop/noteOff(when=ac.currentTime),结束播放音频

  1. GainNode改变音频音量的对象,会改变通过它的音频数据所有的sample frame的信号强度,其属性:

  • gain,是AudioParam对象,通过改变其value值,可以改变音频信号的信号强弱,最小值为0,最大值为1,默认为1

  1. AnalyserNode音频分析对象,能实时的分析音频资源的时域和频域信息,但不对音频流做任何处理,属性:

  • fftSize:设置FFT值的大小,用于分析得到频域,为32-2048之间2的整数次倍,默认为2048,实时得到的音频数据域的个数为fftSize的一半

  • frequencyBinCount:实时得到的音频频域域的数据个数,为FFT值的一半

  • getByteFrequencyData(Uint8Array)复制音频当前的频域数据到Uint8Array中