浏览器音频兼容和ffmpeg的音频转码使用

程序员文章站 2022-06-19 12:40:43

浏览器对各音/视频格式的支持问题浏览器测试效果图 ffmpeg在音频格式转换，和从视频中提取音频的简单实用 1、百度搜索浏览器对于音频文件的兼容，排在前面的文章大部分是复制粘贴很久以前的文章，容易误导搜索资料的人，因此重新验证整理下。以Firefox浏览器为例，Firefox对于mp3格式音频 ......

浏览器对各音/视频格式的支持问题
浏览器测试效果图
ffmpeg在音频格式转换，和从视频中提取音频的简单实用

1、百度搜索浏览器对于音频文件的兼容，排在前面的文章大部分是复制粘贴很久以前的文章，容易误导搜索资料的人，

因此重新验证整理下。

　　以firefox浏览器为例，firefox对于mp3格式音频的支持在发布版本21时就已经支持了（2013年）。

下载firefox各个版本，然后在audio标签上引入mp3格式文件，在v20的firefox不能播放，在v21上firefox可以播放。

firefox浏览器历史版本下载地址：，

firefox和mp3的一些讨论资料地址：https://code.i-harness.com/zh-cn/q/4b1f00

　　重新整理了一个表，罗列当前各主流浏览器对音/视频的支持状况：

浏览器音频兼容和ffmpeg的音频转码使用

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浏览器效果图：

浏览器音频兼容和ffmpeg的音频转码使用

1.3.2、safari浏览器效果图：

浏览器音频兼容和ffmpeg的音频转码使用

2、ffmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序，功能强大，应用广泛。

这里主要介绍下它的转换音频格式和提取音频命令, 以windows pc为例:

2.1、，设置全局环境变量

浏览器音频兼容和ffmpeg的音频转码使用

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官网文档

完整的测试页面和音频文件见:https://github.com/xiaotanit/tan_htmldemo

作者：tdx

出处：博客园tdx的技术博客--http://www.cnblogs.com/tandaxia

您的支持是对博主最大的鼓励，感谢您的认真阅读。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

上一篇：解决表单内无法使用codemirror初始化失败、格式不对齐、行号错位等问题（codemirror react使用专题及常见问题）

下一篇：华为mate40pro怎么启用颜色反转功能?

浏览器音频兼容和ffmpeg的音频转码使用

使用HTML5在网页中嵌入音频和视频播放的基本方法

使用Gordian Knot自带工具分离DVD的视频和音频的图文步骤

Android开发之ExoPlayer的学习和使用（音频）讲解

vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法

FFmpeg 音频重采样的两种方法libavcodec和libswresample

不同浏览器对于html5 audio标签和音频格式的兼容性

微软和谷歌将修复Win10中使用Chrome浏览器的关键音频问题

使用.NET Core搭建分布式音频效果处理服务（二）创建基于FFMpeg的Web程序