HTML5音乐可视化
环境搭建
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-build
,build 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核心功能封装为对象
HTML5音乐可视化的更多相关文章
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- HTML5 ——web audio API 音乐可视化(二)
上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...
- 4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...
- HTML5音频可视化频谱跳动代码
今天学习到用canvas来写 HTML5音频可视化频谱跳动代码 将代码在此做一总结: <!DOCTYPE html> <html lang="en"> ...
- HTML5 ——web audio API 音乐可视化(一)
使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...
- 一款好看+极简到不行的HTML5音乐播放器-skPlayer
Demo: github skPlayer在线预览 预览: 单曲循环模式预览: 使用方法: 方式1:NPM npm install skplayer 方式2:引入文件 引入css文件: <lin ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- Adobe edge animate制作HTML5动画可视化工具(一)
Edge Animate for mac是Adobe最新出品的制作HTML5动画的可视化工具,简单的可以理解为HTML5版本的Flash Pro.在之后的文章中,我会逐一的介绍这款新的HTML5动画神 ...
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
随机推荐
- 了解XSS攻击
XSS又称CSS,全称Cross SiteScript,跨站脚本攻击,是Web程序中常见的漏洞,XSS属于被动式且用于客户端的攻击方式,所以容易被忽略其危害性.其原理是攻击者向有 XSS漏洞的网站中输 ...
- Ajax——ajax调用数据总结
在做人事系统加入批量改动的功能中,须要将前台中的数据传给后台.后台并运行一系列的操作. 通过查询和学习了解到能够通过ajax将值传入到后台,并在后台对数据进行操作. 说的简单点.就是ajax调用后台的 ...
- ubuntu 下安装伪分布式 hadoop
安装准备: (1)hadoop安装包:hadoop-1.2.1.tar.gz (2)jdk安装包:jdk-7u60-linux-i586.gz (3)要是须要eclipse开发的话 还须要eclips ...
- 加载本地html遇到的问题
之前要做一个Demo,需要用UIWebView来加载网页,前端的同事把资源包给我,里面包含html,css,JavaScript,图片等文件.我想当然的把文件夹拷到工程中,然后用以下方法加载: NSU ...
- putty保持连接不自动段开
经常在网上看到有人说自己利用putty工具登录服务器总是连接不上,这样的情况自己在刚接触putty时也遇到过.在 Connection 里面有个 Seconds between keepaliaves ...
- mysql 5.5源码包安装
注:由于mysql5.5的源码包安装与mysql之前的版本安装方法不同,故写一篇随笔记录.5.5的版本不再是./configure make make install 这里用到了cmake了,cmak ...
- VLC-Android和VLC几个关键宏定义的分析
在用SourceInsight分析VLC-Android源码过程中,有几个宏定义在源代码中一直没有找到出处,比如 HAVE_DYNAMIC_PLUGINS和__PLUGIN__,以及MODULE_NA ...
- SVG 和字符图标
制作网站往往需要使用一些图标来提高用户体验,如果我们的是一些扁平化设计的图标,我们可以选择 SVG 或 图标字体来提高用户体验. 下面对这两种技术进行比较. 开发难度: 现在的在线工具非常强大,比如 ...
- ios9基础知识(UI)总结
UIWindow.UILabel.UIColor.UIScreen.UIViewController.UIView.UIControl.UIButton.IBOutlet.IBAction.UISte ...
- C++程序设计实践指导1.2二维数组的操作运算改写要求实现
改写要求1:改写为以单链表表示二维数组 #include <cstdlib> #include <iostream> using namespace std; struct L ...