掌握HTML5中的多媒体--音频(audio)
- - CSDN博客推荐文章音频标签的使用和视频是非常相似的：指定多个音频文件，浏览器会播放其中支持的第一个. 2. 你的浏览器不支持
掌握HTML5中的多媒体--音频(audio)
标签：
html5
多媒体
音频
| 发表时间：2012-08-08 22:10 | 作者：HorkyChen
出处：http://blog.csdn.net
使用音频标签<audio>
音频标签的使用和视频是非常相似的：指定多个音频文件，浏览器会播放其中支持的第一个。
1. <audio src="audio.ogg" controls>
2. 你的浏览器不支持<audio>标签.
3. </audio>
Figure 5列出了所有<audio>可用的属性. 因为不需要像视频播放器那样显示整个控件，所以高、低和预览图(poster)都不再需要了。
Figure 5 音频标签<audio>的属性
|
Attribute |
Value |
Description |
|
Autoplay |
autoplay |
如果指定, 音频会在准备好后立即播放. |
|
Controls |
controls |
显示播放控制工具栏.. |
|
Loop |
loop |
如果指定，则循环播放. |
|
Preload |
preload |
如果指定，音频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。 |
|
Src |
url |
目标音频的URL. |
和视频<video>标签一样，你可以指定多个文件，浏览器会播放其中支持的第一个文件。你也可以指定一个回退(fallback)信息以供浏览器不支持<audio>标签时显示。下面是一个简单的例子:
1. <audio controls autoplay>
2. <source src="audio1.ogg" type="audio/ogg" />
3. <source src="audio1.mp3" type="audio/mpeg" />
4. 你的浏览器不支持<audio>标签.
5. </audio>
总结
当前在HTML5多媒体方面最大的问题是你必须为不同的浏览器提供不同格式的文件，不过它的应用也是大势所趋。以下是一些很棒的参考内容:
- http://www.w3.org/TR/html5/video.html
- http://dev.w3.org/html5/spec/Overview.html
- http://w3schools.com/html5/default.asp
- http://html5test.com/
- http://caniuse.com/
参考: 掌握HTML5中的多媒体--视频(video)
原文地址: Working with Media in HTML5
作者:Jason Beres
转载请注明出处: http://blog.csdn.net/horkychen
作者：HorkyChen 发表于2012-8-8 22:10:17 原文链接
阅读：0 评论：0 查看评论
相关 [html5 多媒体 音频] 推荐：
详述主流浏览器的HTML5音频支持情况
- - GamerBoom.com 游戏邦叙述HTML5音频支持状态糟糕的文章已有很多. 事实就是如此，所以我不会在此赘述这一观点. 相反，我主要着眼于开发者在特定平台中将会遇到的问题及潜在解决方式. 上表总结了网页浏览器当前的市场份额. Internet Explorer依然是主要的桌面浏览器，紧随其后的是Chrome和Firefox. 在手机领域中，Safari主导市场，这主要归功于强大的iOS品牌，紧随其后的是Android.
10 个最佳 HTML5 音频播放器推荐
- - ITeye资讯频道HTML5似乎无所不能，该技术正在逐步蚕食原本属于Flash的市场，并逐渐成为Web开发中的主流技术之一. 本文为你带来10款优秀的基于HTML5实现的音频播放器，你可以在Web项目中使用，为你的用户带来全新的体验. 你可以将本产品作为一个全功能的HTML5音频播放器（带播放列表），或者只是作为一个模块嵌入到你的网站中.
HTML5 API---使用WebAudio API播放音频文件
- - CSDN博客移动开发推荐文章WebAudio API主要是为音频文件添加音效而设计的，但是它也可以用来播放音频文件，这类似于HTML5 audio元素的功能，只是audio元素可以有控制界面，用户可以点击界面上的播放/停止按钮来控制文件的播放，也可以拖动界面上的进度条来控制播放进度. 现在如果采用WebAudio来播放音频文件就不会有该限制，开发者可以任意控制音频文件的播放和停止，这对移动平台的上游戏开发者而言尤为重要.
支持触摸设备的响应式HTML5音频播放器 - AudioPlayer.js
- - ITeye博客日期：2013-5-22 来源： GBin1.com. 如果你希望开发一款支持响应式的HTML5播放器的话，. AudioPlayer.js是一个不错的选择. 它使用HTML5的audio标签帮助你生成一个支持响应式的音频播放器，不使用任何embed代码，图片或者flash，完全使用CSS定义界面.
HTML5 logo 发布
- Greyby - 酷壳 - CoolShell.cn2011年1月19日，W3C发布了HTML5的log，打开W3C的页面，下在的图片印入眼前. 我的第一感觉，就像是看到了小时候看的八一电影制片产的电影. 这分明是号召全世界的无产Web程序员们团结起来，不畏艰难，不怕牺牲，一定要把HTML5的革命事业进行到底. 所以，请各位Web程序员不但在你们的HTML5的网页上加上下面的徽章（关于各个徽章的含义，请参看这里）.
html5 canvas入门
- - Marshal's Blog可以把canvas看做div，不过，它的长和宽不能通过css来定义，要使用标签属性：. 或者javascript对象属性设置：. 使用canvas，只有一种操作方式，使用javascript. 获得canvas对象的上下文对象，该对象是操作canvas的主要对象：. 使用canvas画最简单的线， 点击运行示例，结果看起来是这样：.
HTML5新特性
- - CSDN博客推荐文章 通过fillStyle和strokeStyle 属性可以轻松的设置矩形的填充和线条. 颜色值使用方法和CSS 一样：十六进制数、rgb()、rgba() 和 hsla. 通过 fillRect可以绘制带填充的矩形. 使用 strokeRect 可以绘制只有边框没有填充的矩形. 如果想清除部分 canvas可以使用clearRect.
【转载】HTML5 Messaging
- - HTML5研究小组HTML5 的Message API能够让HTML5页面之间传递消息，甚至这些页面可以不在同一样域名下. 为了让消息能从一个页面发送到另一个页面，主动发送消息的页面必须拥有另一个页面的窗口引用. 然后发送 页面针对接受页调用 postMessage() 方法. postMessage() 方法中 origin 参数的值必须与页面所在的iframe的域名相匹配.
android 多媒体和相机详解五
- - CSDN博客推荐文章 Android框架架包含了各种相机和相机功能的支持，使你可以在你的应用中捕获图像和视频．本文档讨论一个简单快速的获取图像和视频的方法，并概述一个创建自定义用户相机体验的高级方法．. 在使你的应用能使用设备上的相机之前，你应该先想一想你的应用将来会如何使用此硬件．. 必须-相机是必须的，你不希望你的应用安装到一个没有相机的设备上．你应该在manifest文件中声明需要相机．.