浏览器音频兼容和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官网文档
缩放视频格式命令：
ffmpeg -i input.mpg -s 1280x720 output.mp4
或
ffmpeg -i input.mpg -vf scale=1280:720 output.mp4
完整的测试页面和音频文件见:https://github.com/xiaotanit/Tan_HtmlDemo
浏览器音频兼容和ffmpeg的音频转码使用的更多相关文章
- 一个基于JRTPLIB的轻量级RTSP客户端(myRTSPClient)——解码篇：（二）用ffmpeg解码音频
其实这篇的内容和(一)用ffmpeg解码视频基本是一样的,重点还是给ffmpeg指定callback函数,而这个函数是从RTSP服务端那里获取音频数据的. 这里,解码音频的示例代码量之所以比解码视频的 ...
- [转]FFMPEG视音频编解码零基础学习方法
在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...
- [总结]FFMPEG视音频编解码零基础学习方法--转
ffmpeg编解码学习 目录(?)[-] ffmpeg程序的使用ffmpegexeffplayexeffprobeexe 1 ffmpegexe 2 ffplayexe 3 ffprobeexe ...
- FFMPEG视音频编解码零基础学习方法
在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...
- 最简单的基于FFMPEG的音频编码器（PCM编码为AAC）
http://blog.csdn.net/leixiaohua1020/article/details/25430449 本文介绍一个最简单的基于FFMPEG的音频编码器.该编码器实现了PCM音频采样 ...
- FFMPEG视音频编解码零基础学习方法－b
感谢大神分享,虽然现在还看不懂,留着大家一起看啦 PS:有不少人不清楚“FFmpeg”应该怎么读.它读作“ef ef em peg” 0. 背景知识 本章主要介绍一下FFMPEG都用在了哪里(在这里仅 ...
- [总结]FFMPEG视音频编解码零基础学习方法
在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...
- [Audio processing] FFMPEG转音频格式和采样率
利用FFMPEG转音频格式和采样率 import os import string import subprocess as sp #Full path of ffmpeg FFMPEG_BIN = ...
- 【转】[总结]FFMPEG视音频编解码零基础学习方法
在CSDN上的这一段日子,接触到了很多同行业的人,尤其是使用FFMPEG进行视音频编解码的人,有的已经是有多年经验的“大神”,有的是刚开始学习的初学者.在和大家探讨的过程中,我忽然发现了一个问题:在“ ...
随机推荐
- 大数据-hadoop生态之-HDFS
一.HDFS初识 hdfs的概念: HDFS,它是一个文件系统,用于存储文件,通过目录树定位文件,其次,他是分布式的,由很多服务器联合起来 实现功能,集群中的服务器各有各自的角色 HDFS设计适合一次 ...
- 浅析HTTP代理原理--转
代理服务器是HTTP协议中一个重要的组件,发挥着重要的作用. 关于HTTP代理的文章有很多,本文不再赘述,如果不清楚的可以看一下 HTTP代理的基础知识. 本文主要介绍代理的事例,分析一个真实的案例来 ...
- nginx、php-fpm默认配置与性能–TCP socket还是unix domain socket【转】
原文地址:https://www.cnxct.com/default-configuration-and-performance-of-nginx-phpfpm-and-tcp-socket-or-u ...
- python接收axios的post请求，并处理后返回数据
公司的python工程师不会js和python数据交互,所以我就去试了一下. 首先安装python,django框架和django-cors-headers. python官网下载,按提示操作,记住最 ...
- Python面向对象之反射
一.反射的基本概念 二.反射示例 三.反射的应用 一.反射的基本概念 反射:可以用字符串的方式去访问对象的属性,调用对象的方法(但是不能去访问方法),Python中一切皆对象,都可以使用反射. 反射有 ...
- Convolutional Pose Machines（理解）
0 - 背景 人体姿态识别存在遮挡以及关键点不清晰等主要挑战,然而,人体的关键点之间由于人体结构而具有相互关系,利用容易识别的关键点来指导难以识别关键点的检测,是提高关键点检测的一个思路.本文通过提出 ...
- git 命令详细
git是代码管理工具 github是基于git实现的代码管理平台 git --version 查看git版本 git remote -v 查看clone地址 git init 初始化git //全局设 ...
- 解决 win10 新建文件夹重命名卡死的另一种方法
遇到 win10 新建文件夹重命名卡死时 根据网上的各种方法都不起作用时可以试一下这个方法. 文件夹属性 --- 自定义 --- 你想要那种文件夹 优化此文件夹 --- 把 [视频] 改成 [常规项目 ...
- kubenetes_V1.14.0 安装部署
k8s的安装有多种方式,如yum安装,kubeadm安装,kubemini安装,二进制安装(生产环境多采用此方式精确控制安装)等.本文是入门系列验证,之前进行过yum安装,可以查看文章<k8s入 ...
- qml layout
一.使用总结 1.锚点:锚点锚在父控件左边anchors.left: parent.left ,才可以设置anchors.leftMargin:20 才有作用,设置anchors.topMargin: ...