瀏覽器音訊相容和ffmpeg的音訊轉碼使用
阿新 • • 發佈：2018-12-13
1、百度搜索瀏覽器對於音訊檔案的相容，排在前面的文章大部分是複製貼上很久以前的文章，容易誤導搜尋資料的人，
因此重新驗證整理下。
以Firefox瀏覽器為例，Firefox對於mp3格式音訊的支援在釋出版本21時就已經支援了（2013年）。
下載Firefox各個版本，然後在audio標籤上引入mp3格式檔案，在v20的Firefox不能播放，在V21上Firefox可以播放。
重新整理了一個表，羅列當前各主流瀏覽器對音/視訊的支援狀況：
- 注意：
- Safari瀏覽器對於wav音訊格式和mp4視訊格式的支援，需要把頁面部署到web伺服器裡面。 如果只是單純的用Safari瀏覽器開啟磁碟的一個靜態頁面，會發現不支援這兩種格式
- 同上Opera瀏覽器對於ogg視訊格式的支援，也需要把頁面部署到web伺服器上。
1.2、測試程式碼：
<html lang="cn"> <head> <meta charset="utf-8"/> <title>音訊/視訊</title> <style type="text/css"> body{ padding: 20px 50px; } table td, table thView Code{ padding: 5px 10px; text-align: center; } table th { color: blue; font-size: 20px; } table tr td:nth-of-type(1) { color: purple; font-size: 20px; font-weight:bold;; } .first-th { font-size: 12px; color:black;position: relative; } .th-div1{ position: absolute; } .th-div2 { position: absolute; left: 50%; margin-left: -40px; width: 100%; line-height: 1px; border-top: 1px solid black; transform: rotate(30deg); } .th-div3 { position: absolute; top: 6px; right: 4px; } tbody tr:nth-of-type(1) { background-color: #ffffcc; } tbody tr:nth-of-type(2) { background-color: #ccffcc; } tbody tr:nth-of-type(3) { background-color: #ccccff; } tbody tr:nth-of-type(4) { background-color: #FFF0F5; } .testOne{ margin: 20px 5px; padding: 10px; border: 1px dashed black; } .playBtn { margin-left: 20px; width: 120px; height: 50px; background-color: #fff; border: 1px solid black; border-radius: 50px; line-heght: 50px; } </style> </head> <body> <table border="1" cellspacing="0"> <thead> <tr> <th class="first-th"> <div class="th-div1">格式</div> <div class="th-div2"></div> <div class="th-div3">瀏覽器</div> </th> <th>Chrome</th> <th>Firefox</th> <th>Opera</th> <th>Safari</th> <th>IE11</th> <th>Edge</th> </tr> </thead> <tbody> <tr> <td>OGG</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>NO</td> <td>NO</td> <td>YES</td> </tr> <tr> <td>MP3</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>YES</td> </tr> <tr> <td>WAV</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>NO</td> <td>YES</td> </tr> <tr> <td>MP4</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>YES</td> </tr> <tr> <td>WebM</td> <td>YES</td> <td>YES</td> <td>YES</td> <td>NO</td> <td>NO</td> <td>YES</td> </tr> </tbody> </table> <ul>注意： <li>Safari瀏覽器對於wav音訊格式和mp4視訊格式的支援，需要把頁面部署到web伺服器裡面。<br/> 如果只是單純的用Safari瀏覽器開啟磁碟的一個靜態頁面，會發現不支援這兩種格式 </li> <li> 同上Opera瀏覽器對於ogg視訊格式的支援，也需要把頁面部署到web伺服器上。 </li> </ul> <p></p> <div class="testOne"> <h3>1、測試一下，三個audio標籤，src依次為ogg、mp3、wav格式檔案</h3> <audio controls="controls" src="../img/file/Friendships.ogg">不支援該格式播放</audio> <audio controls="controls" src="../img/file/Friendships.mp3">不支援該格式播放</audio> <audio controls="controls" src="../img/file/Friendships.wav">不支援該格式播放</audio> </div> <div class="testOne"> <h3>2、audio標籤相容寫法，一個audio標籤，裡面設定多個source標籤</h3> <audio controls="controls" id="audio"> <source src="../img/file/Friendships.ogg" /> <source src="../img/file/Friendships.mp3" /> <source src="../img/file/Friendships.wav" /> </audio> <button onclick="audioManage()" class="playBtn">播放/暫停</button> </div> <script type="text/javascript"> //手動控制音訊的播放 function audioManage(){ var obj = document.getElementById('audio'); if (obj.paused){ //表示是暫停，下一步播放 obj.play(); } else{ //播放中，下一步暫停 obj.pause(); } } </script> <br/> <div class="testOne"> <h3>3、測試一下，三個video標籤，src依次為mp4、ogg、WebM格式檔案</h3> <video controls="controls" src="../img/file/jia.mp4"></video> <video controls="controls" src="../img/file/jia.ogg"></video> <video controls="controls" src="../img/file/jia.WebM"></video> </div> <div class="testOne"> <h3>4、測試一下，相容寫法, 一個video標籤，三個souce依次引用mp4、ogg、WebM</h3> <video controls="controls" id="video" width="300" height="150"> <source src="../img/file/jia.mp4"/> <source src="../img/file/jia.ogg"/> <source src="../img/file/jia.WebM"/> </video> <button onclick="videoManage()" class="playBtn">播放/暫停</button> <button onclick="changeBigVideo()" class="playBtn">寬高增大</button> <button onclick="changeSmallVideo()" class="playBtn">寬高減小</button> <script type="text/javascript"> var video = document.getElementById('video'); var videoBigInterval = null, videoSmallInterval = null; //視訊暫停和繼續播放 function videoManage(){ if (videoBigInterval){ clearInterval(videoBigInterval); } if (videoSmallInterval){ clearInterval(videoSmallInterval) } if (video.paused){ video.play(); } else{ video.pause(); } } //video標籤寬高變大 function changeBigVideo(){ console.log('...start....big....') if (videoBigInterval){ clearInterval(videoBigInterval); } if (videoSmallInterval){ clearInterval(videoSmallInterval) } videoBigInterval = setInterval(function(){ var oldW = video.width, oldH = video.height; console.log('big --> width: ', oldW, ', height: ', oldH) video.width = oldW*1.05; video.height = oldH*1.05; }, 1000) } //video標籤寬高變小 function changeSmallVideo(){ console.log(".....start ..small...") if (videoBigInterval){ clearInterval(videoBigInterval); } if (videoSmallInterval){ clearInterval(videoSmallInterval) } videoSmallInterval = setInterval(function(){ var oldW = video.width, oldH = video.height; console.log('small --> width: ', oldW, ', height: ', oldH) video.width = oldW*0.95; video.height = oldH*0.95; }, 1000) } </script> </div> </body> </html>
1.3.1、Chrome瀏覽器效果圖：
1.3.2、Safari瀏覽器效果圖：
2、FFmpeg是一套可以用來記錄、轉換數字音訊、視訊，並能將其轉化為流的開源計算機程式，功能強大，應用廣泛。
這裡主要介紹下它的轉換音訊格式和提取音訊命令, 以windows PC為例:
2.1、下載安裝，設定全域性環境變數
2.2、cmd開啟終端，cd進入要轉化的音訊資料夾。
2.3、執行提取音訊命令或者音訊轉換命令，格式：
ffmpeg -i input.mp4 -f mp3 -ar 16k output.mp3
說明：
- 源視訊或音訊：input.mp4
- 輸出格式：-f mp3 (這裡設定輸出mp3格式)
- 音訊取樣率：-ar 16k （這裡設定了16k）
- 輸出檔名：output.mp3
假如要從一個my.mp4視訊檔案中提取音訊，得到一個my.mp3音訊檔案，則命令為：
ffmpeg -i my.mp4 -f mp3 -ar 16k my.mp3
或者要從一個mp3音訊檔案，轉換為其他音訊格式如wav
ffmpeg -i my.mp3 -f wav -ar 16k my.wav