`
xiaopo123
  • 浏览: 9502 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

HTML 5 音频

 
阅读更多

原文连接:http://bang.chinabyte.com/thread-416697-1-1.html

 

Web 上的音频直到现在,仍然不存在一项旨在网页上播放音频的标准。

今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。
audio 元素能够播放声音文件或者音频流。
视频格式
当前,audio 元素支持三种音频格式:


如何工作
如需在 HTML5 中播放音频,您所有需要的是:

<audio src="song.ogg" controls="controls">

</audio>

control 属性供添加播放、暂停和音量控件。
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的:
实例

<audio src="song.ogg" controls="controls">

Your browser does not support the audio tag.

</audio>

上面的例子使用一个 Ogg 文件,适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器,音频文件必须是 MP3 或 Wav 类型。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式:
实例

<audio controls="controls">

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

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

Your browser does not support the audio tag.

</audio>

Internet Explorer
Internet Explorer 8 不支持 audio 元素。在 IE 9 中,将提供对 audio 元素的支持。
&lt;audio&gt; 标签的属性

属性值描述autoplay autoplay如果出现该属性,则音频在就绪后马上播放。controls controls如果出现该属性,则向用户显示控件,比如播放按钮。preload preload如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 ”autoplay",则忽略该属性。
src url要播放的音频的 URL。

 

分享到:
评论

相关推荐

    jQuery+html5音频可视化音乐播放特效

    **jQuery+HTML5音频可视化音乐播放特效** 在现代网页设计中,音频播放功能已经不再仅仅是简单的播放和停止,而是向着更高级的用户体验发展,其中包括音频的可视化效果。本项目利用jQuery库和HTML5的Audio API,实现...

    Html5 音频播放器实例

    -- 为不支持HTML5音频的浏览器提供备选方案,如Flash或链接到下载 --&gt; Your browser does not support the audio element. ``` 这里的`controls`属性用于显示默认的播放、暂停、音量控制等UI。`&lt;source&gt;`标签则...

    html5学习资源:html5音频视频开发案例

    这个“html5音频视频开发案例”压缩包提供了一系列实战教程,旨在帮助初学者掌握HTML5在多媒体领域的应用。 HTML5的音频和视频元素是其最显著的特性之一。`&lt;audio&gt;`和`&lt;video&gt;`标签的引入,使得开发者无需依赖Flash...

    html5音频游戏

    HTML5音频游戏是一种基于Web技术开发的游戏,利用HTML5的新特性,尤其是其音频处理和多媒体支持,为玩家提供丰富的互动体验。HTML5是超文本标记语言的第五个主要版本,它在2014年被正式标准化,为网页开发者带来了...

    HTML5多种音频视频播放插件,歌词同步

    JPlayer是一款基于JavaScript的开源HTML5音频和视频播放器,它支持多种格式,包括MP3、AAC、WAV等,并且具有自定义皮肤和扩展功能。JPlayer的一个独特之处在于其对歌词同步的支持,通过使用LRC格式的歌词文件,可以...

    HTML5音频播放器和jQuery全屏图片幻灯片轮播切换

    在本主题中,我们将深入探讨HTML5音频播放器和jQuery全屏图片幻灯片轮播切换的应用与实现。 首先,HTML5音频播放器是HTML5标准引入的新特性,它允许开发者在网页中直接嵌入音频内容,而无需依赖Flash等外部插件。...

    HTML5音频可视化频谱跳动代码.zip

    HTML5音频可视化频谱跳动代码是利用现代Web技术,特别是HTML5的Audio API和Canvas元素,来创建一种动态的、随着音乐节奏变化的视觉效果。这个项目的主要目的是将音频的频率信息转换为可视化的图形,使用户可以直观地...

    HTML5音频文档

    HTML5音频文档主要介绍了如何在网页中嵌入和控制音频内容。HTML5为开发者提供了新的元素和属性,使得在浏览器中处理音频变得简单且标准化。以下是相关知识点的详细说明: 1. **`&lt;video&gt;`元素**:HTML5引入的`...

    jQuery+html5音频可视化音乐播放特效.zip

    《jQuery+HTML5音频可视化音乐播放特效》 在现代网页设计中,音频播放与可视化功能已经成为提升用户体验的重要一环。本资源"jQuery+html5音频可视化音乐播放特效.zip"提供了一套基于jQuery和HTML5的音乐播放器实现...

    HTML5音频 视频代码

    以下是对HTML5音频和视频相关知识点的详细说明。 ### HTML5音频和视频元素 HTML5引入了`&lt;audio&gt;`和`&lt;video&gt;`元素,使得在网页上直接嵌入多媒体内容变得简单。这两个元素允许开发者无需借助Flash或其他插件就能播放...

    HTML5音频音频API 音频可视化DEMO

    HTML5音频音频API 音频可视化DEMO,需要打开后在页面上传mp3文件播放

    用HTML5对音频的播放

    因此,开发时最好使用像Modernizr这样的库来检测浏览器对HTML5音频的支持,并据此调整代码。 综上所述,HTML5的`&lt;audio&gt;`标签提供了强大的音频播放功能,结合JavaScript可以实现更复杂的控制逻辑。在设计网页时,...

    WordPress ++++html5音频播放器

    **WordPress ++++html5音频播放器** 在WordPress中集成HTML5音频播放器是现代网站增强用户体验的一个重要方式,尤其对于音乐分享或者在线电台站点来说,一个功能强大的HTML5音频播放器能够提供无缝的音乐播放体验。...

    支持触摸设备的CSS3响应式HTML5音频播放器

    本项目"支持触摸设备的CSS3响应式HTML5音频播放器"正是这样一个针对多设备优化的解决方案,尤其适用于触屏设备。它利用了HTML5的强大功能,结合CSS3的先进技术,为用户提供了一种流畅、美观且互动性强的音频播放体验...

    HTML5程序设计-3期(KC014) 单元设计-单元4 HTML5音频与视频.doc

    对于不支持HTML5音频和视频的旧版浏览器,或者需要插入Flash内容的情况,`embed`标签可以派上用场。`embed`标签可以用来插入任何外部可交互内容,如Flash动画。虽然随着HTML5的发展,Flash的使用逐渐减少,但理解...

    Amplitudejs是现代的HTML5音频播放器没有任何依赖

    总结来说,Amplitude.js是一个现代的HTML5音频解决方案,它为开发者提供了全面的控制,使他们能够创建独特且高度个性化的音频播放体验。无论是简单的音乐播放器还是复杂的多媒体应用,Amplitude.js都能以无依赖、...

    适合移动设备的响应式html5音频播放器

    响应式HTML5音频播放器是现代网页设计中的一个重要组成部分,特别是在移动设备的广泛使用下,它使得音频内容的在线播放变得更加便捷。这款基于"audioplayer.js"插件的播放器,充分利用了HTML5的Audio API,同时结合...

    HTML5手机音频播放器

    HTML5音频支持的格式包括MP3、AAC、Opus、Vorbis和WAV。不同的浏览器可能对这些格式的支持程度不同,因此提供多种格式的源文件很重要,确保在各种环境下都能播放。 5. 兼容性考虑: 尽管HTML5的音频支持在现代...

    jquery html5音频播放器样式_网页音乐播放器代码.zip

    实现效果: jquery html5音频播放器样式_网页音乐播放器代码,在网页中显示,还可以播放音乐,是不是很高大上,经常用于个人网站中,觉得非常炫酷,php中文网推荐下载呢!

Global site tag (gtag.js) - Google Analytics