HTML audio标签 音频播放器
在HTML5 标准出现以前,程序员无法想使用<a>标签一样,轻松的播放音频文件。HTML5为解决这个问题,提供了一个新的标签<audio>,让程序员无须再大量的使用flash播放音频文件了。
操作方法
- 01
在HTML5 标准出现以前,程序员无法想使用<a>标签一样,轻松的播放音频文件。HTML5为解决这个问题,提供了一个新的标签<audio>,让程序员无须再大量的使用flash播放音频文件了。
- 02
HTML5 <audio>效果图:
- 03
HTML5 <audio>源码:
- 04
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5音频播放器 |HTML5 audio</title> </head> <body style="padding:0px;margin:0px;text-align:center;"> <audio src="see-you-again.mp3" controls="controls" preload="auto" autoplay="autoplay" loop="loop"> 您浏览器不支持HTML5音频播放器 </audio> </body> </html>
- 05
HTML5 audio属性注释:
- 06
audio标签属性注释: src:音频文件引用地址 controls:是否显示控制按钮(暂停、播放) preload:预先加载音频文件 autoplay:当网页加载完成之后,自动播放音频文件 loop:循环播放音频文件
- 07
音频格式: 当前,audio 元素支持三种音频格式:
- 08
音频格式详解: Ogg:全称应该是OGGVobis(oggVorbis)是一种新的音频压缩格式,类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是.OGG。Ogg文件格式可以不断地进行大小和音质的改良,而不影响旧有的编码器或播放器。
- 09
MP3:是一种音频压缩技术,其全称是动态影像专家压缩标准音频层面3(Moving Picture Experts Group Audio Layer III),简称为MP3。它被设计用来大幅度地降低音频数据量。利用 MPEG Audio Layer 3 的技术,将音乐以1:10 甚至 1:12 的压缩率,压缩成容量较小的文件,而对于大多数用户来说重放的音质与最初的不压缩音频相比没有明显的下降。
- 10
WAV:为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音频信息资源,被Windows平台及其应用程序所广泛支持,该格式也支持MSADPCM,CCITT A LAW等多种压缩运算法,支持多种音频数字,取样频率和声道,标准格式化的WAV文件和CD格式一样,也是44.1K的取样频率,16位量化数字,因此在声音文件质量和CD相差无几!
- 11
各种关联:wav格式音质最好,但是文件体积较大。mp3压缩率较高,普及率高,音质相比wav要差。ogg与mp3在相同位速率(Bit Rate)编码的情况下,ogg体积更小,并且ogg是免费的不用交专利费。