html5支持的几种音频格式介绍

最新推荐文章于 2024-05-31 22:11:41 发布
最新推荐文章于 2024-05-31 22:11:41 发布
阅读量1.3k 收藏
点赞数
分类专栏： html5 CSS3 文章标签： html5 ffmpeg 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ffffffff8/article/details/128624086
版权
html5 同时被 2 个专栏收录
144 篇文章 6 订阅
订阅专栏
CSS3
23 篇文章 0 订阅
订阅专栏
本文介绍了不同音频格式如Ogg、MP3、WAV和AAC的特点与用途，并展示了HTML5中处理音频的方法。同时，探讨了MR直播、无延迟直播技术和视频安全加密在企业应用中的重要性，以及在线导播台的功能和应用场景。
摘要由CSDN通过智能技术生成

 

关于音频的格式

ogg音频

Ogg全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没 有专利限制的。OggVorbis文件的扩展名是.OGG。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。

mp3音频

MP3是一种音频压缩技术，其全称是 动态影像专家压缩标准音频层面3（Moving Picture Experts Group Audio Layer III），简称为MP3。 它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术，将音乐以1:10 甚至 1:12 的压缩率，压缩成容量较小的文件，而 对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。它是在1991年由位于德国埃尔朗根的研究组织Fraunhofer-Gesellschaft 的一组工程师发明和标准化的。用MP3形式存储的音乐就叫作MP3音乐，能播放MP3音乐的机器就叫作MP3播放器。

wav音频

WAV为微软公司(Microsoft)开发的一种声音文件格式，它符合RIFF(Resource Interchange File Format)文件规范，用于保存Windows平台的音 频信息资源，被Windows平台及其应用程序所广泛支持，该格式也支持MSADPCM，CCITT A LAW等多种压缩运算法，支持多种音频数字，取样频率和 声道，标准格式化的WAV文件和CD格式一样，也是44.1K的取样频率，16位量化数字，因此在声音文件质量和CD相差无几！ WAV打开工具是WINDOWS 的媒体播放器。

acc音频

AAC（Advanced Audio Coding），中文称为“高级音频编码”，出现于1997年，基于 MPEG-2的音频编码技术。由Fraunhofer IIS、杜比实验室 、AT&T、Sony（索尼）等公司共同开发，目的是取代MP3格式。2000年，MPEG-4标准出现后，AAC 重新集成了其特性，加入了SBR技术和PS技术， 为了区别于传统的 MPEG-2 AAC 又称为 MPEG-4 AAC。

使用示例：

<audio controls autoplay loop src="audio/cuplayer.mp3">
		<!-- <source src="audio/cuplayer.mp3" type=""> -->
</audio>

属性

HTML5 Audio/Video 方法

addTextTrack()：向音频/视频添加新的文本轨道

canPlayType()：检测浏览器是否能播放指定的音频/视频类型

load()：重新加载音频/视频元素

play()：开始播放音频/视频

pause()：暂停当前播放的音频/视频

  MR直播

无延迟直播

视频加密与安全

在线导播台

阿酷tony
关注
专栏目录
HTML5音频
溯琳的博客
04-18 679
HTML5音频 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
html5录制mp3,html5 录制mp3音频，支持采样率和比特率设置
weixin_28894087的博客
06-19 839
13年的时候做过html5录音，一个问题是保存的wav格式文件很大，当初用了一个迂回的方式，上传到服务器后调用 lame 编码器转换，但由于文件大，上传较慢。不得不说，前端技术发展真是日新月异，有人实现了js版本的lame编码器，可以直接在浏览器端录制MP3音频。lamejs介绍最初有个开源项目libmp3lame-js，直接将 lame 源码编译为 js版本，后来有人基于libmp3lam...
HTML5 Audio(音频)
thgj0006的博客
03-25 947
元素. 元素允许使用多个 元素. 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。在 与
HTML5 音频文件
Rodgexue的专栏
08-04 3988
1.如果在支持html5的不会显示audio，如果不支持的会显示您的浏览器不支持媒体格式。然后通过src来指定媒体来源，autoplay表示在刷新浏览器后自动播放。controls表示展示控制器。可以控制媒体文件<audio src="test.mp3" autoplay controls>您的浏览器不支持媒体格式</audio>2.可以通过source来控制来源，因为浏览器不是对所有的格式支持，如
html5音频和视频
fzx1217020016的博客
09-27 300
音频的控件： control：control属性提供添加播放，暂停和声量的控件 音频标签：   定义声音 规定多媒体资源，可以多个 视频播放： 控件：control：提供了添加播放，暂停和音量控件 标签： 定义声音     规定多媒体资源，可以多个 属性： width：框
HTML5 音频 Audio 标签详解
最新发布
一名全栈开发工程师
05-31 5225
HTML5 引入了标签，允许开发者在网页中直接嵌入音频文件，而不需要依赖第三方插件。
HTML5特效集合，集合了几十种HTML5特效
10-13
4. **Audio和Video元素**：HTML5提供了内置的音频和视频播放器，无需Flash等外部插件，支持多种格式，如MP4、WebM和Ogg，简化了多媒体内容的集成。 5. **拖放功能(Drag and Drop)**：HTML5提供了拖放API，使得用户...
HTML5&CSS3网页制作：视频和音频编解码器.pptx
06-01
2. Ogg Vorbis：一种新的音频压缩格式，支持多声道，具有很出众的特点。 3. ACC（Advanced Audio Coding）：一种基于MPEG-2的音频编码技术，目的是取代MP3格式。 在网页制作中，选择合适的视频和音频编解码器非常...
炫丽单页html5企业介绍模板
04-02
【炫丽单页HTML5企业介绍模板】是一种用于企业在线展示的网页设计模板，它结合了HTML5技术的先进功能，以创新的方式呈现企业的基本信息、产品或服务、团队成员以及联系方式等内容。这样的模板通常设计精美，用户体验...
HTML5语法的基本介绍
10-05
5. **SVG矢量图**：HTML5支持内嵌SVG（Scalable Vector Graphics）图像，这是一种用于描绘矢量图形的XML格式，能够无损缩放，非常适合图标和复杂图形的展示。 6. **Web Storage**：HTML5提供了`localStorage`和`...
Chimee由奇舞团研制的h5播放器它支持mp4m3u8flv等多种格式
08-11
Chimee 由奇舞团研制的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式。通过插件式开发，能满足业务方快速迭代、灰度发布等要求。让开发者能够轻松快捷地完成视频场景的开发。
Html5网页纯JavaScript录制MP3音频
10-23
Html5网页纯JavaScript录制MP3音频 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Html5网页JavaScript录制MP3音频</title> <meta charset="utf-8" /> </head> <body> Html5网页JavaScript录制MP3音频 录制 停止 上传 调试信息： [removed][removed] [removed] var recorder = new MP3Recorder({ debug:true, funOk: function () { btnStart.disabled = false; log('初始化成功'); }, funCancel: function (msg) { log(msg); recorder = null; } }); var mp3Blob; function funStart(button) { btnStart.disabled = true; btnStop.disabled = false; btnUpload.disabled = true; log('录音开始...'); recorder.start(); } function funStop(button) { recorder.stop(); btnStart.disabled = false; btnStop.disabled = true; btnUpload.disabled = false; log('录音结束，MP3导出中...'); recorder.getMp3Blob(function (blob) { log('MP3导出成功'); mp3Blob = blob; var url = URL.createObjectURL(mp3Blob); var div = document.createElement('div'); var au = document.createElement('audio'); var hf = document.createElement('a'); au.controls = true; au.src = url; hf.href = url; hf.download = new Date().toISOString() + '.mp3'; hf[removed] = hf.download; div.appendChild(au); div.appendChild(hf); recordingslist.appendChild(div); }); } function log(str) { recordingslist[removed] += str + ''; } function funUpload() { var fd = new FormData(); var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3'); fd.append('mp3Name', mp3Name); fd.append('file', mp3Blob); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { recordingslist[removed] += '上传成功：' + mp3Name + ''; } }; xhr.open('POST', 'upload.ashx'); xhr.send(fd); } [removed] </body> </html> [javascript] view plain copy 在CODE上查看代码片派生到我的代码片 (function (exports) { var MP3Recorder = function (config) { var recorder = this; config = config || {}; config.sampleRate = config.sampleRate || 44100; config.bitRate = config.bitRate || 128; navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true }, function (stream) { var context = new AudioContext(), microphone = context.createMediaStreamSource(stream), processor = context.createScriptProcessor(16384, 1, 1),//bufferSize大小，输入channel数，输出channel数 mp3ReceiveSuccess, currentErrorCallback; config.sampleRate = context.sampleRate; processor.onaudioprocess = function (event) { //边录音边转换 var array = event.inputBuffer.getChannelData(0); realTimeWorker.postMessage({ cmd: 'encode', buf: array }); }; var realTimeWorker = new Worker('js/worker-realtime.js'); realTimeWorker.onmessage = function (e) { switch (e.data.cmd) { case 'init': log('初始化成功'); if (config.funOk) { config.funOk(); } break; case 'end': log('MP3大小：', e.data.buf.length); if (mp3ReceiveSuccess) { mp3ReceiveSuccess(new Blob(e.data.buf, { type: 'audio/mp3' })); } break; case 'error': log('错误信息：' + e.data.error); if (currentErrorCallback) { currentErrorCallback(e.data.error); } break; default: log('未知信息：', e.data); } }; recorder.getMp3Blob = function (onSuccess, onError) { currentErrorCallback = onError; mp3ReceiveSuccess = onSuccess; realTimeWorker.postMessage({ cmd: 'finish' }); }; recorder.start = function () { if (processor && microphone) { microphone.connect(processor); processor.connect(context.destination); log('开始录音'); } } recorder.stop = function () { if (processor && microphone) { microphone.disconnect(); processor.disconnect(); log('录音结束'); } } realTimeWorker.postMessage({ cmd: 'init', config: { sampleRate: config.sampleRate, bitRate: config.bitRate } }); }, function (error) { var msg; switch (error.code || error.name) { case 'PERMISSION_DENIED': case 'PermissionDeniedError': msg = '用户拒绝访问麦客风'; break; case 'NOT_SUPPORTED_ERROR': case 'NotSupportedError': msg = '浏览器不支持麦客风'; break; case 'MANDATORY_UNSATISFIED_ERROR': case 'MandatoryUnsatisfiedError': msg = '找不到麦客风设备'; break; default: msg = '无法打开麦克风，异常信息:' + (error.code || error.name); break; } if (config.funCancel) { config.funCancel(msg); } }); } else { if (config.funCancel) { config.funCancel('当前浏览器不支持录音功能'); } } function log(str) { if (config.debug) { console.log(str); } } } exports.MP3Recorder = MP3Recorder; })(window);
EasyPlayer.js:EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播与点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、asm、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTPRTMPHTTP-FLVHLS(m3u8) live streaming & vod strea
05-10
EasyPlayer.js 简介 EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。 功能说明 支持 m3u8/HLS 播放; 支持 HTTP-FLV/WS-FLV 播放; 支持 H265 播放; 支持直播和点播播放; 支持全屏显示; 支持重连播放； 集成使用示例 普通集成 1.引入 copy EasyWasmPlayer.js 到项目中 copy libDecoder.wasm到项目或者www的根目录（一定要根目录） 2.在 html 中引用 EasyWasmPlayer.js <!DOCTYPE html> <html l
网页播放器（支持MP4等多种格式）
06-06
网页播放器（支持MP4等多种格式），非常好用。
【HTML5】HTML5 多媒体标签 ① ( audio 音频标签 | 音频标签常见属性值设置 | 音频标签默认代码设置 | 音频标签设置多种类型音频文件 )
热门推荐
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-19 1万+
一、HTML5 多媒体标签 二、音频标签 三、音频标签代码示例 ( 默认操作 ) 四、音频标签代码示例 ( 插入 mp3 / ogg 两种格式的音频 )
HTML5音视频播放(Video,Audio)和常见的坑处理
weixin_30542079的博客
06-27 1954
1. 前言背景 　　在HTML5出现之前，Web页面访问音视频主要是通过Flash，Activex插件，还有微软后来推出的silverlight来展现的，尽管FLASH曾经风靡全球，但是随着互联网的不断发展，进入移动时代以后，Flash的风头渐渐被HTML5替代，主要原因是Flash经常爆出漏洞，安全性令人担忧，性能方面较差，对网络浏览和设备的电池也消耗比较大等等，Flash天生就是为PC而生，...
HTML5播放音频
quweiie的专栏
03-31 1923
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="mediaplayer"&gt;
HTML5 音频 视频
qq_41028725的博客
04-10 218
1.video元素的使用 <video id='video' src='https://rocketsystem.oss-cn-shanghai.aliyuncs.com/TraingProgram/Medias/2310f8364bc3413ca5f86e36622b3fa1_%E5%B0%8F%E7%8B%97%E6%95%A3%E6%AD%A5.mp4' cont...
HTML5中的视频音频使用详解
上下求索
12-30 3773
一、video1.1 video支持视频格式 常见的视频格式视频的组成部分：画面、音频、编码格式 视频编码：H.264、Theora、VP8(google开源) HTML5支持的视频格式：Ogg 带有Theora视频编码+Vorbis音频编码的Ogg文件 支持的浏览器:F、C、O MEPG4 带有H.264视频编码+AAC音频编码的MPEG4文件 支持的浏览器: S、C WebM 带有VP8视
HTML5新特性与浏览器支持解析
例如，`<audio src="song.ogg" controls>`，同样支持多个`<source>`元素以适应不同浏览器的音频格式需求。 这些新特性使得HTML5成为了现代网页开发的首选标准，它极大地丰富了网页内容的表现形式，提升了用户体验，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值