html5中audio（音訊）的分析

這篇文章要跟大家分享的內容是關於html5中audio（音訊）的分析，有一定的參考價值，有需要的朋友可以從參考一下，希望對你有幫助。

使用html5音訊背景

直到現在，仍然不存在一項旨在網頁上播放音訊的標準。今天，大多數音訊是透過插件（例如 Flash）來播放的。然而，並非所有瀏覽器都擁有相同的插件。 HTML5 規定了一種透過 audio 元素來包含音訊的標準方法，audio 元素能夠播放聲音檔案或音訊串流。

音訊格式

目前，audio 元素支援Ogg Vorbis,Mp3,Wav這三種音訊格式，這是音訊格式瀏覽器支援情況如下：

Chrome 3.0√

音訊格式	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Safari 3.0		Ogg Vorbis		√	#√
#

MP3

√

 

 
##√

##√

Wav 

√

√# 

√

################################ ## ###### ###### ###### ###########################使用audio元素實現音頻播放#########audio元素的controls 屬性供添加播放、暫停和音量控件，b97864c2e0ef2353a16c4d64c7734e92 與81d2bc32cafa2076a27f10cdd878d0ab 之間插入的內容是供不支援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為例），再環境變數path5\ffmpegbin目錄的路徑（G:\mydeveloperapplication\ilder\html5\ffmpegbin -20180803-5aeb3b0-win32-static\bin）。 ######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其他音訊格式的轉換以及常用指令。 ######相關文章推薦：#########html5中video（影片）元素的分析############svg中53207a333cb59025d48bd080b9112b21元素的使用及marker屬性的介紹######

以上是html5中audio（音訊）的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！