HTML5音乐可视化

时间:2023-02-24 09:26:54

环境搭建

1,安装nodejs和Git,配置环境变量
2,安装express,npm install -g express-generator
3,创建项目,express -e music(项目名称)
4,进入项目,npm install
5,安装实时监听工具,npm install -g supervisor
6,测试,supervisor bin/www,浏览器验证127.0.0.1:3000

sublime运行js文件

1,打开build system -> new build system新建配置文件

{
"cmd": ["node", "--use-strict", "--harmony", "$file"],
"selector": "source.js"
}

保存文件Node.sublime-buildbuild system设置为Node

音乐的获取与播放

构建应用的前后端

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<div class="right" id="box"></div>

控制高度变化:

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核心功能封装为对象


Copyright © 吴华锦
雅致寓于高阁渔舟唱晚,古典悠然
格调外发园林绿树萦绕,馥郁清香

HTML5音乐可视化的更多相关文章

  1. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  2. HTML5 ——web audio API 音乐可视化&lpar;二&rpar;

    上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...

  3. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

  4. HTML5音频可视化频谱跳动代码

    今天学习到用canvas来写  HTML5音频可视化频谱跳动代码  将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...

  5. HTML5 ——web audio API 音乐可视化&lpar;一&rpar;

    使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...

  6. 一款好看&plus;极简到不行的HTML5音乐播放器-skPlayer

    Demo: github skPlayer在线预览 预览: 单曲循环模式预览: 使用方法: 方式1:NPM npm install skplayer 方式2:引入文件 引入css文件: <lin ...

  7. jqm视频播放器&comma;html5视频播放器&comma;html5音乐播放器&comma;html5媒体播放器&comma;video开展demo&comma;html5视频播放演示示例&comma;html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  8. Adobe edge animate制作HTML5动画可视化工具(一)

    Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神 ...

  9. HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

随机推荐

  1. Hadoop Pig简介、安装、试用

    相比Java的MapReduce api,Pig为大型数据集的处理提供了更高层次的抽象,与MapReduce相比,Pig提供了更丰富的数据结构,一般都是多值和嵌套的数据结构.Pig还提供了一套更强大的 ...

  2. Duilib实现QQ聊天窗口晃动

    转载:http://blog.csdn.net/arbboter/article/details/26282717 转载:http://blog.csdn.net/zerolusta/article/ ...

  3. 【python cookbook】【数据结构与算法】9&period;在两个字典中寻找相同点

    问题:寻找两个字典中间相同的地方(相同的键.相同的值等) 解决方案:通过keys()或者items()方法来执行常见的集合操作(比如求并集.交集和差集)

  4. jar转dll

    IKVM http://www.cnblogs.com/luckeryin/archive/2012/03/28/2421274.html

  5. POJ 1739

    楼教主男人八题之一... 题目大意: 求从左下角经过所有非障碍点一次到达右下角的方案数 这里不是求回路,但是我们可以考虑,在最下面一行再增加一行,那么就可以当做求此时左下角到右下角的回路总数,那么就转 ...

  6. find&lowbar;if函数与partition函数的转换

    编写程序,求大于等于一个给定长度的单词有多少.我们还会修改输出,使程序只打印大于等于给定长度的单词. 使用find_if实现的代码如下: #include<algorithm> #incl ...

  7. UpdatePanel控件的使用和局部刷新

    http://www.cnblogs.com/baiefjg/archive/2009/06/14/1502813.html

  8. 分页查询时,使用cookie保存上次的查询条件。jQuery实现方法以及中间遇到的坑

    今天做分页查询时需要在跳转页面时保存上次查询的条件,如下: 实现的大致思路就是用cookie本地保存. 其中需要用到jQuery.Cookie插件. 使用方法很简单: 存数据:$.cookie(“ke ...

  9. 爬取博主所有文章并保存到本地(&period;txt版)--python3&period;6

    闲话: 一位前辈告诉我大学期间要好好维护自己的博客,在博客园发布很好,但是自己最好也保留一个备份. 正好最近在学习python,刚刚从py2转到py3,还有点不是很习惯,正想着多练习,于是萌生了这个想 ...

  10. MD5加密和sha加密

    sha加密原理Algorithm)又叫安全哈希加密技术,是当今世界最先近的加密算法.主要用于文件身份识别.数字签名和口令加密等. 对于明文信息A,通过SHA1算法,生成一条160位长的识别码B.且明文 ...