使用html5音訊背景
直到現在,仍然不存在一項旨在網頁上播放音訊的標準。今天,大多數音訊是通過外掛(比如 Flash)來播放的。然而,並非所有瀏覽器都擁有同樣的外掛。HTML5 規定了一種通過 audio 元素來包含音訊的標準方法,audio 元素能夠播放聲音檔案或者音訊流。
音訊格式
當前,audio 元素支援Ogg Vorbis,Mp3,Wav這三種音訊格式,這是音訊格式瀏覽器支援情況如下:
音訊格式 | IE 9 | Firefox 3.5 | Opera 10.5 | Chrome 3.0 | Safari 3.0 |
---|---|---|---|---|---|
Ogg Vorbis | √ | √ | √ | ||
MP3 | √ | √ | √ | ||
Wav | √ | √ | √ |
使用audio元素實現音訊播放
audio元素的controls 屬性供新增播放、暫停和音量控制元件,<audio> 與 </audio> 之間插入的內容是供不支援audio 元素的瀏覽器顯示的,source 元素可以連結不同的音訊檔案,解決瀏覽器相容音訊格式問題,下面使用了二個source元素實現上面五個瀏覽器都能播放該音訊。簡單程式碼如下:
<audio controls="controls">該瀏覽器不支援該格式音訊的播放 <source src="../videoAudio/1.mp3"></source> <source src="../videoAudio/1.wav"></source> </audio>
使用Dom進行操作audio
使用自定義的按鈕實現controls屬性的播放與暫停功能,程式碼如下:
<button onclick="controlPlay()">播放/停止</button> <audio id="vioce" >該瀏覽器不支援該格式音訊的播放 <source src="../videoAudio/1.mp3"></source> <source src="../videoAudio/1.wav"></source> </audio> <script> var voice =document.getElementById("vioce"); function controlPlay(){ if(voice.paused){//判斷是否停止了 voice.play();//播放 } else{ voice.pause();//停止 } } </script>
音訊格式轉化(將Wav格式轉換成MP3格式)
1.首先下載ffmpeg,輸入網址www.ffmpeg.org(開源網址),進入windows中進行下載windows版本的檔案。
2.解壓ffmpeg壓縮檔案(以ffmpeg-20180803-5aeb3b0-win32-static.zip為例),再環境變數path中增加ffmpegbin目錄的路徑(G:mydeveloperapplicationhbuilderhtml5ffmpeg-20180803-5aeb3b0-win32-staticin)。
3.環境變數設定好後,然後在DOS命令窗體中鍵入ffmpeg,測試是否可執行。
4. 在DOS命令窗體中 切換到mp3音訊檔案就在的目錄,最後鍵入ffmpeg -i 1002_c.wav -f mp3 -acodec libmp3lame -y 2.mp3(這裡是將1002_c.wav裝換成2.mp3)。
5.ffmpeg其他音訊格式的轉換以及常用命令,請參考https://www.cnblogs.com/xiaofengfeng/p/3573025.html,https://www.cnblogs.com/dwdxdy/p/3240167.html。