1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. js
  6. [套件] Recorder.js 網頁版錄音程式,不限平台開啟網頁立即就可錄音

[套件] Recorder.js 網頁版錄音程式,不限平台開啟網頁立即就可錄音

2018/03/14

梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音

  那天有朋友問到,要如何將在Google SONG MAKER製作好的音效檔給下載回來,由於Google SONG MAKER是採用Javascript套件,並且是線上直接進行混音,因此並不是一個音效檔,所以這時候,最快的方法,就是透過側錄的方式,來將在Google SONG MAKER上所製作好的音效給錄下來,雖然說網路上有不少免費的錄音程式,但卻會有系統的限制,因此梅干花了點時間找了一下,發現一個超酷的javascript套件Recorder.js,讓你打開網頁,立即就可進行錄音,不但跨平台,且完全無需安裝。


  這真的只能說,現在javascript真的愈來愈強大了,而Recorder.js則是搭配HTML5,因此當使用時,會需要請求使用硬體的麥克風權限,再加上安全性的問題,所以在使用時,需透過Web方式來開啟才能使用,但這些全部都可在Google Chrome瀏覽器,直接搞定,因此有需要錄音工具的朋友,現在就一塊來看看,如何設定與使用Recorder.js吧!


Recorder.js

套件名稱: Recorder.js 
套件下載:https://github.com/mattdiamond/Recorderjs

Step1
由於此套件是放在Github下,當進入後,再點右上角的按鈕,並按下載鈕,下載完畢後再解壓。
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step2
接著這時可在Chrome瀏覽器中,安裝一個WebServer套件。
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step3
點一下WebServer開啟後,再點「CHOSE FOLDER」鈕,選擇網站的目錄位置。
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step4
這時選擇剛所下載,並解壓的資料夾。
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step5
設定好後,再點下方的Web URL。
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step6
開啟後,再進到「examples/example_simple_exportwav.html」,接著會請求使用麥克風的權限,再按「允許」
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step7
當要開始錄音時,再按「record」鈕。
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step8
這時再播放Google SONG MAKER中所製作好的音效。
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step9
當錄制完畢後,再按「stop」鈕。
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音


Step10
在按下stop鈕時,下方就會出現剛所錄制的音效檔,同時是.wav檔,除了可立即撥放試聽外,也可按後方的下載鈕,將剛所錄製好的音效檔給下載回來啦!而這隻網頁版錄音程式,梅干個人覺得還挺方便好用的,因此有需要錄音程式的朋友,下回不坊可試試看囉!
梅問題-[套件]Recorder.js 網頁版錄音程式,開啟網頁立即就可錄音