瀏覽器音訊相容和ffmpeg的音訊轉碼使用

FFmpeg · 發表 2018-10-04 09:18:00

摘要： 1、百度搜尋瀏覽器對於音訊檔案的相容，排在前面的文章大部分是複製貼上很久以前的文章，容易誤導搜尋資料的人，因此重新驗證整理下。以Firefox瀏覽器為例，Firefox對於mp3格式音訊的支援在釋出版本21時就已經支援了（2013年）。下載Firefox各個版本，然後在aud...

1、百度搜尋瀏覽器對於音訊檔案的相容，排在前面的文章大部分是複製貼上很久以前的文章，容易誤導搜尋資料的人，

因此重新驗證整理下。

以Firefox瀏覽器為例，Firefox對於mp3格式音訊的支援在釋出版本21時就已經支援了（2013年）。

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

Firefox瀏覽器歷史版本下載地址： ofollow,noindex">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>

View Code

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

版權宣告

作者： TDX

您的支援是對博主最大的鼓勵，感謝您的認真閱讀。

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出原文連線，否則保留追究法律責任的權利。

瀏覽器音訊相容和ffmpeg的音訊轉碼使用

您可能也會喜歡…