瀏覽器音頻兼容和ffmpeg的音頻轉碼使用

原創 tandaxia 2018-10-10 10:42
  • 瀏覽器對各音/視頻格式的支持問題
  • 瀏覽器測試效果圖
  • ffmpeg在音頻格式轉換，和從視頻中提取音頻的簡單實用

1、百度搜索瀏覽器對於音頻文件的兼容，排在前面的文章大部分是複製粘貼很久以前的文章，容易誤導搜索資料的人，

因此重新驗證整理下。

　　以Firefox瀏覽器爲例，Firefox對於mp3格式音頻的支持在發佈版本21時就已經支持了（2013年）。

下載Firefox各個版本，然後在audio標籤上引入mp3格式文件，在v20的Firefox不能播放，在V21上Firefox可以播放。

Firefox瀏覽器歷史版本下載地址：http://ftp.mozilla.org/pub/firefox/releases/，

Firefox和mp3的一些討論資料地址：https://code.i-harness.com/zh-CN/q/4b1f00

 　　重新整理了一個表，羅列當前各主流瀏覽器對音/視頻的支持狀況：

注意：

  • 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 th{
                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

其他更多命令參考：ffmpeg參數中文詳細解釋  ,   FFmpeg官網文檔

完整的測試頁面和音頻文件見:https://github.com/xiaotanit/Tan_HtmlDemo

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

MPLS協議的學習

karen_kan 2019-02-23 14:06:05

單元測試、集成測試、系統測試的側重點

Vince_Lee 2019-02-23 13:53:02

第一篇

zhouym_007 2019-02-23 13:37:48

測試一下

kaixinhai2010 2019-02-23 13:35:21

Web服務器測試和監控工具及組件介紹

znlingdong 2019-02-23 13:29:59

怎樣做好網站建設初期的測試工作

yuncash 2019-02-23 13:25:11

LNMP編譯安裝

半夜心晴 2019-02-23 13:14:44

GYKZ-2直流電阻測試儀

恆新國儀 2019-02-23 13:12:43

測試博客

zhengguo07q 2019-02-23 13:04:42

cisco路由交換系統測試命令

51CTOYoung 2019-02-23 13:00:58

測試

風車361 2019-02-23 12:55:52

針對Firefox的0day新***代碼已經擴散

jkxuser 2019-02-23 13:49:04

HTTP狀態碼

Charles0914 2019-02-23 13:48:07

FTP及NFS服務的配置

sevenLZ 2019-02-23 13:23:28

FTP驗證端口決定傳輸端口

風雨無阻827054 2019-02-23 13:15:32