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

OnlyLing 发布于2019-08-01 17:09 / 2327人阅读

摘要：应用核心结构介绍应用技术栈服务端前端界面音频操作音频数据可视化项目构建全局安装使用模板引擎，新建项目进入项目目录安装依赖安装项目变动实时监控工具启动服务并检查项目是否成功创建观测默认端口详析重要对象可理解为上下文对象，包含对象以及

应用核心结构介绍

应用技术栈

服务端：Node+Express+ejs

前端界面：HTML+CSS(CSS3)+JS

音频操作：webAudio

音频数据可视化：Canvas

项目构建

全局安装express：npm install -g express-generator

使用ejs模板引擎，新建项目music：express --view=ejs music

进入项目目录安装依赖：cd music && npm install

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

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

详析重要API

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

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

currentTime属性：AudioContext从创建开始到当前的时间（秒）

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

createBufferSource()方法：创建AudioBufferSourceNode对象

createAnalyser()方法：创建AnalyserNode对象

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

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),结束播放音频

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

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

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

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

frequencyBinCount：实时得到的音频频域域的数据个数，为FFT值的一半

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

服务器托管云服务器 h5背景音乐网络音乐播放器安卓音乐播放器音乐播放器实现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50987.html

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

摘要：应用核心结构介绍应用技术栈服务端前端界面音频操作音频数据可视化项目构建全局安装使用模板引擎，新建项目进入项目目录安装依赖安装项目变动实时监控工具启动服务并检查项目是否成功创建观测默认端口详析重要对象可理解为上下文对象，包含对象以及应用核心结构介绍 showImg(https://segmentfault.com/img/bVQWJ4?w=350&h=369); 应用技术栈服务端：...

lanffy 2019-08-20 18:00 评论0 收藏0
【项目】H5打造可视化音乐播放器

摘要：应用核心结构介绍应用技术栈服务端前端界面音频操作音频数据可视化项目构建全局安装使用模板引擎，新建项目进入项目目录安装依赖安装项目变动实时监控工具启动服务并检查项目是否成功创建观测默认端口详析重要对象可理解为上下文对象，包含对象以及应用核心结构介绍 showImg(https://segmentfault.com/img/bVQWJ4?w=350&h=369); 应用技术栈服务端：...

wangjuntytl 2019-08-29 12:56 评论0 收藏0
SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0