Html5音樂可視化之音樂的獲取和播放

時間 2019-11-25

原文原文鏈接

---恢復內容開始---css

Html5音樂可視化之音樂的獲取和播放html

最近沉迷與數據可視化沒法自拔，可是本身的水平實在不夠，因此先從一些小Gimmicks開始吧！前端

下面來一張應用核心結構圖感覺如下：前端（瀏覽器）從服務器上獲取音頻數據，獲取數據以後調用一個WebAudio，WebAudio一方面要播放音頻數據，一方面要分析音頻數據，而且將分析的音頻數據傳遞給canvans，canvans拿到數據以後就將它可視化。node

看着這些個步驟是否是以爲很簡單，然而事實並非這樣的，接下來就跟着我一塊兒去實現這個小項目吧！git

首先，咱們要把大方向把握住，要明白整個項目實現的流程：github

1.音頻獲取以及播放：前端界面，node服務端構建，webaudio相關api音頻數據獲取並播放；web

2.音頻可視化：webaudio相關api分析音頻數據，canvans根據將其可視化；ajax

3.應用優化（代碼優化，效果優化，界面響應式優化）；express

接下來就是實操啦！npm

一.構建應用先後端：（我是在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();
}