经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » JavaScript » 查看文章
浏览器音频兼容和ffmpeg的音频转码使用
来源：cnblogs　　作者：TDX　　时间：2018/10/8 9:07:23　　对本文有异议

 

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、测试代码：

  1. <html lang="cn">
  2.     <head>
  3.         <meta charset="utf-8"/>
  4.         <title>音频/视频</title>
  5.         <style type="text/css">
  6.             body{ padding: 20px 50px; }
  7.             table td, table th{
  8.                 padding: 5px 10px; text-align: center;
  9.             }
  10.             table th { color: blue; font-size: 20px; }
  11.             table tr td:nth-of-type(1) { color: purple; font-size: 20px; font-weight:bold;; }
  12.             .first-th { font-size: 12px; color:black;position: relative; }
  13.             .th-div1 {
  14.                 position: absolute;
  15.             }
  16.             .th-div2 {
  18.                 position: absolute; left: 50%; margin-left: -40px; width: 100%;
  19.                 line-height: 1px; border-top: 1px solid black;
  20.                 transform: rotate(30deg);
  21.  
  22.             }
  23.             .th-div3 {
  24.                 position: absolute; top: 6px; right: 4px;
  25.             }
  26.             tbody tr:nth-of-type(1) { background-color: #ffffcc; }
  27.             tbody tr:nth-of-type(2) { background-color: #ccffcc; }
  28.             tbody tr:nth-of-type(3) { background-color: #ccccff; }
  29.             tbody tr:nth-of-type(4) { background-color: #FFF0F5; }
  32.             .testOne{
  33.                 margin: 20px 5px; padding: 10px;
  34.                 border: 1px dashed black;
  35.             }
  36.             .playBtn {
  37.                 margin-left: 20px;
  38.                 width: 120px; height: 50px; background-color: #fff;
  39.                 border: 1px solid black; border-radius: 50px; line-heght: 50px;
  40.             }
  41.         </style>
  42.     </head>
  43.  
  44.     <body>
  45.         <table border="1" cellspacing="0">
  46.             <thead>
  47.                 <tr>
  48.                     <th class="first-th">
  49.                         <div class="th-div1">格式</div>
  50.                         <div class="th-div2"></div>
  51.                         <div class="th-div3">浏览器</div>
  52.                     </th>
  53.                     <th>Chrome</th>
  54.                     <th>Firefox</th>
  55.                     <th>Opera</th>
  56.                     <th>Safari</th>
  57.                     <th>IE11</th>
  58.                     <th>Edge</th>
  59.                 </tr>
  60.             </thead>
  61.             <tbody>
  62.                 <tr>
  63.                     <td>OGG</td>
  64.                     <td>YES</td>
  65.                     <td>YES</td>
  66.                     <td>YES</td>
  67.                     <td>NO</td>
  68.                     <td>NO</td>
  69.                     <td>YES</td>
  70.                 </tr>
  71.                 <tr>
  72.                     <td>MP3</td>
  73.                     <td>YES</td>
  74.                     <td>YES</td>
  75.                     <td>YES</td>
  76.                     <td>YES</td>
  77.                     <td>YES</td>
  78.                     <td>YES</td>
  79.                 </tr>
  80.                 <tr>
  81.                     <td>WAV</td>
  82.                     <td>YES</td>
  83.                     <td>YES</td>
  84.                     <td>YES</td>
  85.                     <td>YES</td>
  86.                     <td>NO</td>
  87.                     <td>YES</td>
  88.                 </tr>
  89.                 <tr>
  90.                     <td>MP4</td>
  91.                     <td>YES</td>
  92.                     <td>YES</td>
  93.                     <td>YES</td>
  94.                     <td>YES</td>
  95.                     <td>YES</td>
  96.                     <td>YES</td>
  97.                 </tr>
  98.                 <tr>
  99.                     <td>WebM</td>
  100.                     <td>YES</td>
  101.                     <td>YES</td>
  102.                     <td>YES</td>
  103.                     <td>NO</td>
  104.                     <td>NO</td>
  105.                     <td>YES</td>
  106.                 </tr>
  107.             </tbody>
  108.         </table>
  109.         <ul>注意：
  110.             <li>Safari浏览器对于wav音频格式和mp4视频格式的支持，需要把页面部署到web服务器里面。<br/>
  111.                 如果只是单纯的用Safari浏览器打开磁盘的一个静态页面，会发现不支持这两种格式
  112.             </li>
  113.             <li>
  114.                 同上Opera浏览器对于ogg视频格式的支持，也需要把页面部署到web服务器上。
  115.             </li>
  116.         </ul>
  117.         <p></p>
  118.  
  119.         <div class="testOne">
  120.             <h3>1、测试一下，三个audio标签，src依次为ogg、mp3、wav格式文件</h3>
  121.             <audio controls="controls" src="../img/file/Friendships.ogg">不支持该格式播放</audio>
  122.             <audio controls="controls" src="../img/file/Friendships.mp3">不支持该格式播放</audio>
  123.             <audio controls="controls" src="../img/file/Friendships.wav">不支持该格式播放</audio>
  124.         </div>
  125.  
  126.         <div class="testOne">
  127.             <h3>2、audio标签兼容写法，一个audio标签，里面设置多个source标签</h3>
  128.             <audio controls="controls" id="audio">
  129.                 <source src="../img/file/Friendships.ogg" />
  130.                 <source src="../img/file/Friendships.mp3" />
  131.                 <source src="../img/file/Friendships.wav" />
  132.             </audio>
  133.             <button onclick="audioManage()" class="playBtn">播放/暂停</button>
  134.         </div>
  135.         <script type="text/javascript">
  136.  
  137.             //手动控制音频的播放
  138.             function audioManage(){
  140.                 var obj = document.getElementById('audio');
  141.                 if (obj.paused){
  142.                     //表示是暂停，下一步播放
  143.                     obj.play();
  144.                 }
  145.                 else{
  146.                     //播放中，下一步暂停
  147.                     obj.pause();
  148.                 }
  149.             }
  150.         </script>
  151.  
  152.         <br/>
  153.         <div class="testOne">
  154.             <h3>3、测试一下，三个video标签，src依次为mp4、ogg、WebM格式文件</h3>
  155.             <video controls="controls" src="../img/file/jia.mp4"></video>
  156.             <video controls="controls" src="../img/file/jia.ogg"></video>
  157.             <video controls="controls" src="../img/file/jia.WebM"></video>
  158.         </div>
  159.         <div class="testOne">
  160.             <h3>4、测试一下，兼容写法, 一个video标签，三个souce依次引用mp4、ogg、WebM</h3>
  161.             <video controls="controls" id="video" width="300" height="150">
  162.                 <source src="../img/file/jia.mp4"/>
  163.                 <source src="../img/file/jia.ogg"/>
  164.                 <source src="../img/file/jia.WebM"/>
  165.             </video>
  166.             <button onclick="videoManage()" class="playBtn">播放/暂停</button>
  167.             <button onclick="changeBigVideo()" class="playBtn">宽高增大</button>
  168.             <button onclick="changeSmallVideo()" class="playBtn">宽高减小</button>
  169.             <script type="text/javascript">
  170.                 var video = document.getElementById('video');
  171.                 var videoBigInterval = null, videoSmallInterval = null;
  173.                 //视频暂停和继续播放
  174.                 function videoManage(){
  176.                     if (videoBigInterval){
  177.                         clearInterval(videoBigInterval);
  178.                     }
  180.                     if (videoSmallInterval){
  181.                         clearInterval(videoSmallInterval)
  182.                     }
  184.                     if (video.paused){
  185.                         video.play();
  186.                     }
  187.                     else{
  188.                         video.pause();
  189.                     }
  190.                 }
  192.                 //video标签宽高变大
  193.                 function changeBigVideo(){
  194.                     console.log('...start....big....')
  195.                     if (videoBigInterval){
  196.                         clearInterval(videoBigInterval);
  197.                     }
  199.                     if (videoSmallInterval){
  200.                         clearInterval(videoSmallInterval)
  201.                     }
  203.                     videoBigInterval = setInterval(function(){
  204.                         var oldW = video.width, oldH = video.height;
  206.                         console.log('big --> width: ', oldW, ', height: ', oldH)
  207.                         video.width = oldW*1.05;
  208.                         video.height = oldH*1.05;
  209.                     }, 1000)
  210.                 }
  212.                 //video标签宽高变小
  213.                 function changeSmallVideo(){
  215.                     console.log(".....start ..small...")
  216.                     if (videoBigInterval){
  217.                         clearInterval(videoBigInterval);
  218.                     }
  220.                     if (videoSmallInterval){
  221.                         clearInterval(videoSmallInterval)
  222.                     }
  224.                     videoSmallInterval = setInterval(function(){
  225.                         var oldW = video.width, oldH = video.height;
  226.                         console.log('small --> width: ', oldW, ', height: ', oldH)
  227.                         video.width = oldW*0.95;
  228.                         video.height = oldH*0.95;
  229.                     }, 1000)
  230.                 }
  231.             </script>
  232.         </div>
  233.  
  234.     </body>
  235. </html>
View Code

 

1.3.1、Chrome浏览器效果图：

 

1.3.2、Safari浏览器效果图：

 

 

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

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

2.1、下载安装，设置全局环境变量

2.2、cmd打开终端，cd进入要转化的音频文件夹。

2.3、执行提取音频命令或者音频转换命令，格式：

  1. ffmpeg -i input.mp4 -f mp3 -ar 16k output.mp3

说明：

  • 源视频或音频：input.mp4
  • 输出格式：-f mp3  (这里设置输出mp3格式)
  • 音频采样率：-ar 16k   （这里设置了16k）
  • 输出文件名：output.mp3

假如要从一个my.mp4视频文件中提取音频，得到一个my.mp3音频文件，则命令为：

  1. ffmpeg -i my.mp4 -f mp3 -ar 16k my.mp3

或者要从一个mp3音频文件，转换为其他音频格式如wav

  1. ffmpeg -i my.mp3 -f wav -ar 16k my.wav

其他更多命令参考：ffmpeg参数中文详细解释  ,   FFmpeg官网文档

 

 

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

 

版权声明

作者：TDX

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

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

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

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号