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

  • 浏览器对各音/视频格式的支持问题
  • 浏览器测试效果图
  • 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端菜鸟变老鸟

setTimeout定时器以及部分小知识点

思路:加一个标记flag,开始执行之后改变flag为原来的值并启动定时器,暂停的时候改变flag的值。

7820
来自专栏十月梦想

vue非父子通讯(BUS/总线机制/订阅者模式)

前面我们讲述的是父子间的数据通讯,那么这里就来介绍非父子间通讯!之前的发布的《一天带你入门到放弃vue.js(二)》中介绍了使用Event调度器来实现传递,这里...

34810
来自专栏梧雨北辰的开发录

iOS屏幕旋转及其基本适配方法

前段时间抽空总结了一下iOS视频播放的基本用法,发现这其中还有一个我们无法绕过的问题,那就是播放界面的旋转与适配。的确,视频播放与游戏类型的App经常会遇到这个...

1.7K50
来自专栏程序员叨叨叨

私人订制Android本地图片选择器

史上最强的安卓图片选择器——GalleryFinal; 简书博客地址——http://www.jianshu.com/p/48ddd6756b7a

20730
来自专栏非著名程序员

基础篇章:关于 React Native 之 KeyboardAvoidingView 组件的讲解

友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 看完了这个组件的名字 KeyboardAvoi...

49350
来自专栏hotqin888的专栏

小程序中搜索文件,阅览pdf,分享文件链接,评论表情符号

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

11810
来自专栏LinXunFeng的专栏

iOS - Swift UIButton中ImageView的animationImages动画执行完毕后,图标变暗

17330
来自专栏前端小叙

手机端网页使用html5地理定位获取位置失败的解决办法

网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端...

92960
来自专栏猿人谷

Cocoa编程中视图控制器与视图类详解

iPhone编程规则是:一个窗口,多个视图。UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示在UIWindow(这其实也是个...

25850
来自专栏Taylor技术日志

Laravel-Excel导出功能文档

可以在闭包中修改一些属性,很多属性可在配置文件中设置默认值 config/excel.php

2.6K500

扫码关注云+社区

领取腾讯云代金券