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
代碼實現部分：
?
---恢復內容結束---
轉載于:https://www.cnblogs.com/java-7/p/6725832.html
總結
以上是生活随笔為你收集整理的Html5音乐可视化之音乐的获取和播放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android攻城狮Gallery和Im
- 下一篇： mysql group replicat