当前，audio 元素支持三种音频格式：

  IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis   √ √ √  
MP3 √     √ √
Wav   √ √   √ 
<!DOCTYPE HTML>

<html>

<body>

<audio controls="controls">

  <source src="/i/song.ogg" type="audio/ogg">

  <source src="/i/song.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

</body>

</html>

<audio> 标签的属性

属性 值 描述
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
preload preload

如果出现该属性，则音频在页面加载时进行加载，并预备播放。

如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。

【HTML5】audio音频的更多相关文章

  1. html5 audio音频播放全解析

    序 html5开启了一个新时代,因为它让浏览器本身变得不那么被动,audio api就是一个典型的列子,在html5还没确定之前,如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给 ...

  2. HTML5: HTML5 Audio(音频)

    ylbtech-HTML5: HTML5 Audio(音频) 1.返回顶部 1. HTML5 Audio(音频) HTML5 提供了播放音频文件的标准. 互联网上的音频 直到现在,仍然不存在一项旨在网 ...

  3. js获取html5 audio 音频时长方法

    <audio src="我的好兄弟.mp3" controls="controls"  id="audio" style=" ...

  4. HTML5 Audio(音频)

        <audio controls> <source src="horse.ogg" type="audio/ogg"> <s ...

  5. css总结16:HTML5 多媒体音频(Audio)视频(video )

    1 显示嵌入网页中的 MP3 文件: <embed height="50" width="100" src="horse.mp3"&g ...

  6. HTML5 学习07——Video(视频)Audio(音频)

    <video> 元素:提供了 播放.暂停和音量控件来控制视频. width 和 height 属性:控制视频的尺寸 <video> 与</video> 标签之间插入 ...

  7. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

  8. CEF3 HTML5 audio标签为什么不能播放mp3格式的音频文件

    CEF3 HTML5 audio标签 为什么不能播放mp3格式的音频文件   原因略.   解决方法: 找一个最新版的chrome ,我用的是24版本.路径 C:\Documents and Sett ...

  9. HTML5 audio 如何实现播放多个MP3音频

    <audio>标签是HTML5中的新标签,定义声音用于嵌入音频内容,比如音乐或其他音频流.用的比较多音频格式是.mp3. <audio>标签常用属性如下表 属性 值 描述 au ...

  10. Three.js + HTML5 Audio API 打造3D音乐频谱，Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

随机推荐

  1. Java JNI 编程进阶 实例+c++数据类型与jni数据类型转换

    原文:http://www.iteye.com/topic/295776 JNI一直以来都很少去关注,但却是我心中的一个结,最近这几天刚好手头有点时间,因此抽空看了一下这方面的东西,整理了一份文档,J ...

  2. Gulp， 比Grunt更好用的前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...

  3. 老项目的#iPhone6于iPhone6Plus适配#iPhone6分辨率与适配

    技术博客http://www.cnblogs.com/ChenYilong/    本文永久地址为http://www.cnblogs.com/ChenYilong/p/4011744.html ,转 ...

  4. 微信也能鉴别山寨iPhone【微信高级教程2】

    现在的技术真的很厉害,iPhone都能山寨几乎一样,外观不用说,系统UI都做得差不多相同,ytkah的一位朋友之前就被人骗了,她拿来手机让我优化,说是很卡,起初ytkah也琢磨很久,只是持怀疑态度,没 ...

  5. CocoStudio基础教程(4)骨骼动画的动态换肤

    1.概述 游戏中人物的状态会发生改变,而这种改变通常要通过局部的变化来表现出来.比如获得一件装备后人物形象的改变,或者战斗中武器.防具的损坏等.这些变化的实现就要通过动态换肤来实现. 2.运行到程序 ...

  6. Apache prefork 模块指令分析

    问题背景: 在一台只有内存的vps上安装directadmin之后经常内存耗,经过查看之后发现Apache成了罪魁祸首急速消耗内存SWAP剩余空间都是0,最终导致内核开始大下杀手,把MySQL都杀了, ...

  7. PHP导出数据到CSV文件函数/方法

    如果不清楚什么是CSV文件,可看如下文章介绍  CSV格式的是什么文件?CSV是什么的缩写? /** * 导出数据到CSV文件 * @param array $data 数据 * @param arr ...

  8. Linux简单的常用命令——纯手打（慢慢积累）

    ==============linux下快捷键==================ctrl+insert 复制shift +insert 粘贴 输入文件名的前三个字母,按tab键自动补全文件名 在vi ...

  9. RecContentType有哪些

    HTML  页面text/javascript  `type="text/javascript"` 是比较老的写法IETF 推荐的是 `type="application ...

  10. linux下搭建Nginx

    Linux上搭建nginx,及简单配置  在上家公司都是运维安装nginx,到新公司后代码开发完成部署测试服务器要求自己装nginx,研究了好久安装好之后,到正式上线还要自己安装,索性把安装步骤自己记 ...