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

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

代码实现部分：

---恢复内容结束---

转载于:https://www.cnblogs.com/java-7/p/6725832.html

Html5音乐可视化之音乐的获取和播放相关推荐

前端项目——实现qq音乐网页版本（样式+获取数据+播放）
这是一个完整的项目实现,内容包括网页排版,利用js css实现一些动态特效,特在此记录项目实现过程中的核心思想,以及难点的解决方法和在此项目中学到的新知识. 首先看一下该项目的官网效果可以看到该网页 ...
Unity 音乐可视化（音乐频谱控制物体的运动）
1.实现思想:通过改变物体的坐标值在update函数中实时更新物体的位置. using UnityEngine; using System.Collections;public class NewBe ...
【C++】基于OpenGL的音乐可视化（六）：最终版本
经过一个多月的努力,插件的开发终于完成,等待以后测试上线,激动٩(๑>◡<๑)۶.这里,写一下利用OpenGL进行音乐可视化即音乐频谱图的绘制大致流程. (1)音频解析对音频解析前,一定 ...
html乐谱播放器,html5 canvas音谱可视化mp3音乐播放器代码
特效描述:html5 canvas 音谱可视化 mp3音乐播放器代码.html5 canvas通过AudioContext对获取audio标签播放的音域和音高,调用js绘制相应高度的矩形或线条. 代 ...
lkmusic项目改进版本之WebAudio版本支持音乐可视化已更新至github 欢迎下载
亲们如果觉得好请fork我的github lkmusic 效果预览图(2016-4-26日已经改进) 更新: 优化界面效果修复播放完成后不会自动切换处于暂停状态的bug 已经上传至github(敬请 ...
第15章音乐可视化（《Python趣味创意编程》教学视频）
(图书介绍:童晶:<Python趣味创意编程>新书预告) 15 音乐可视化本章我们将实现音乐可视化的效果,如图所示.首先学习Minim库的下载配置,并利用Minim库播放音乐文件.绘制音 ...
Python版孤勇者 | 画图+演奏+音乐可视化
零基础python入门教程:python666.cn 大家好,欢迎来到 Crossin的编程教室 ! python里有个叫做 turtle 的库,用它提供的方法可以很简单的画线和涂色: import ...
Unity音乐可视化效果研究
两年前,为项目做演示视频的时候用了一个AE模板弄了一个音乐可视化效果,当时也没想过会要做到项目里面. 后来项目落地的时候用了另外一个效果.前一段时间在学习图形学,突然想起这件事,对于那个未能完成的效果 ...
前端HTML5视频_谷粒音乐实战-张晓飞-专题视频课程
前端HTML5视频_谷粒音乐实战-385人已学习课程介绍谷粒音乐是使用WEB技术(HTML.JavaScript.CSS)直接构建的移动端APP.本套视频深入移动端开发的核心部分. ...

Html5音乐可视化之音乐的获取和播放

Html5音乐可视化之音乐的获取和播放相关推荐

最新文章

热门文章