Html5音乐可视化之音乐的获取和播放
---恢复内容开始---
Html5音乐可视化之音乐的获取和播放
最近沉迷与数据可视化无法自拔,但是自己的水平实在不够,所以先从一些小Gimmicks开始吧!
下面来一张应用核心结构图感受以下:前端(浏览器)从服务器上获取音频数据,获取数据之后调用一个WebAudio,WebAudio一方面要播放音频数据,一方面要分析音频数据,并且将分析的音频数据传递给canvans,canvans拿到数据之后就将它可视化。
看着这些个步骤是不是觉得很简单,然而事实并不是这样的,接下来就跟着我一起去实现这个小项目吧!
首先,我们要把大方向把握住,要明白整个项目实现的流程:
1.音频获取以及播放:前端界面,node服务端构建,webaudio相关api音频数据获取并播放;
2.音频可视化:webaudio相关api分析音频数据,canvans根据将其可视化;
3.应用优化(代码优化,效果优化,界面响应式优化);
接下来就是实操啦!
一.构建应用前后端:(我是在windows平台上构建的)
1.先安装了git base,然后从官网下载了Node.js的Windows Installer,安装完成后,想验证是否nodejs安装成功,便通过git base 的窗口输入:node -v,但是却返回:sh.exe": node :command not found。
去网上搜索了一番,说这种问题一般就是环境变量的问题导致的,然后选择『计算机』-『属性』-『高级系统设置』-『环境变量』,先查看了『系统变量』部分,发现安装后确实在系统变量的Path后追加了我的安装路径,即:C:\Program Files\nodejs;然后,我打开『用户环境变量』部分查看了下Path的值,发现在最后系统自动加入了C:\Users\s94983\AppData\Roaming\npm,发现环境变量都已经默认设置了,但是为什么上面的输入不能反馈版本信息呢?
通过查找,我尝试在『用户环境变量』部分的Path下再追加C:\Program Files\nodejs,然后关闭掉git base,重新打开后再次输入node -v,这次终于能成功反馈版本信息了,问题解决!
综上需要说明一点,修改path后,需要重新打开git base,如果你是用dos窗口输入命令(node -v)也是一样,如果不关闭,重新打开,还是会返回sh.exe": node :command not found。
2.但是可能还是会存在问题:npm命令不能在git bash中使用
Bingo@DESKTOP-19C7BJT MINGW64 ~
$ npm -v
bash: npm: command not found
上网查询得知安装完nodejs之后配置windows环境变量只能保证在命令行工具中可以使用npm,如果想在git bash中使用需要再安装一遍
- 下载 npm
Bingo@DESKTOP-19C7BJT MINGW64 ~
$ git clone --recursive git://github.com/isaacs/npm.git
Cloning into 'npm'...
remote: Counting objects: 63481, done.
remote: Compressing objects: 100% (23/23), done.
remote: Total 63481 (delta 5), reused 0 (delta 0), pack-reused 63458
Receiving objects: 100% (63481/63481), 32.37 MiB | 399.00 KiB/s, done.
Resolving deltas: 100% (35818/35818), done.
Checking connectivity... done.
Checking out files: 100% (3096/3096), done.
- 安装npm
Bingo@DESKTOP-19C7BJT MINGW64 ~
$ cd npm
Bingo@DESKTOP-19C7BJT MINGW64 ~/npm (latest)
$ node cli.js install npm -gf
- 验证
Bingo@DESKTOP-19C7BJT MINGW64 ~/npm (latest)
$ npm -v
3.最后要提醒,如果出现:npm ERR! Error: EPERM: operation not permitted这样的错误,解决方法是:
a.最简单的方法如下:
windows + X 组合键就可以打开下图
选择要管理员运行的请选框起来的第二个也可以按windows+x+a
b.或者,使用搜索cmd,打开之后,选择"使用管理员权限运行CMD";
但问题是,这种方式需要每次都这样打开,我希望默认能够就是管理员方式运行。其实也有一劳永逸的方法,如下;
c.修改注册表;
Win+R --输入 regedit,打开注册表,找到以下位置: HKEY_CURRENT_USER\Software\Microsoft\Windows
NT\CurrentVersion\AppCompatFlags\Layers
,新建一个字符串值,命名为"c:\windows\system32\cmd.exe",一般情况下,cmd.exe都安装在C盘
然后右键--修改 -- 数值数据写入“RUNASADMIN”,确定 !
或者,也可以采用注册表导入的方式操作,如下:
直接复制下面内容(系统安装在C盘32位为准):
Windows Registry Editor Version 5.00
[HKEY_CURRENT_USER\Software\Microsoft\Windows
NT\CurrentVersion\AppCompatFlags\Layers]
"c:\\windows\\system32\\cmd.exe"="RUNASADMIN"
打开记事本,复制粘贴入以上代码,另存为hao.reg,然后双击导入注册表即可。
OK,这下我们Win+R输入cmd,启动时就已经默认是管理员身份了。
d.修改文件目录所有者: 进入nodejs的安装目录 (默认是 C:\Program Files\nodejs),或者C:\Program Files;
在nodejs上右键打开属性;
选择安全-->高级,这时候会看到所有这是SYSTEM,选择"修改";
输入你目前的账户名称,并检查OK之后,OK保存;
4.全局安装express:
5.选择一个目录作为项目目录:(e:/GitHub/music)
express -e music
6.
.
7.安装一个实时监听的小工具:supervisor
8.实时监测www这个项目
当看到下面这个界面,就说明可以访问了:
9.express默认访问的是3000端口,所以在浏览器中输入:127.0.0.1:3000即可访问:
当出现这个界面的时候,说明后台已经构建好了。
二.前端界面的实现:
1.用sunlime打开上面构建的music文件。
2.在index.ejs中搭建界面的大致轮廓,代码如下:
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/index.css' /> </head> <body> <header> <h1><%= title %></h1> </header> <div class="left"> <ul>
//用循环语句把文件中歌曲的名字上传到界面 <% music.forEach(function(name){%> <li><%=name%></li> <%})%> </ul> </div> <div class="right"></div> </body> </html>
3.接下来要给轮廓穿上衣服:
*{ padding: 0; margin: 0; box-sizing: border-box; } html, body{ height: 100%; } body { font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; background: #000; color: #fff; text-align: center; } header, .left, .right{ position: absolute; } header{ left: 10px; top: 10px; right: 10px; height: 150px; border:solid #fff 1px; } header h1{ font-size: 40px; height: 60px; line-height: 60px; } .left{ left: 10px; top: 170px; bottom: 10px; width: 200px; border: solid #fff 1px; } .left ul{ overflow: auto; } .left ul li{ height: 30px; line-height: 30px; cursor: pointer; } .left ul li.selected{ color: green; } .right{ top: 170px; right: 10px; bottom: 10px; left: 220px; border: solid #fff 1px; }
3.获取每一个音频文件的名字:
var express = require('express'); var router = express.Router(); var path=require("path"); var media=path.join(__dirname,"../public/media"); /* GET home page. */ router.get('/', function(req, res) { var fs=require("fs"); fs.readdir(media,function(err,names){ if (err) { console.log(err); }else{ res.render('index',{title:'special Music',music:names}); } }); }); module.exports = router;
4.ajax请求服务端获取音频资源数据:
//这一段是为了让界面实现鼠标覆盖时发生改变
function w(s){ return document.querySelectorAll(s); } var lis=w("#list li"); for(var i=0;i<lis.length;i++){ lis[i].onclick=function(){ for(var j=0;j<lis.length;j++){ lis[j].className=""; } this.className="selected"; load("/media/"+this.title); } } //这一段是ajax请求服务端获取音频资源数据 var xhr=new XMLHttpRequest(); function load(url){ xhr.open("GET",url); xhr.responseType="arraybuffer"; xhr.onload=function(){ console.log(xhr.response); } xhr.send(); }
5.(该项目的核心)解码并且播放音频资源:WebAudio API
代码实现部分:
---恢复内容结束---