UDN-企业互联网技术人气社区

板块导航

浏览  : 1440
回复  : 1

[HTML5] HTML5 Audio元素入门:如何实现音频播放

[复制链接]
友美C_cup的头像 楼主
发表于 2015-7-8 15:45:03 | 显示全部楼层 |阅读模式
本帖最后由 友美C_cup 于 2015-8-7 11:30 编辑

       您可使用 audio 元素向您的网页中添加基本音频播放器,而无需脚本或加载项控件。
  
       这一部分包括下列主题:
  1.最简单的音频播放
  2.相关主题
  
       最简单的音频播放

  1. <!doctype html>
  2. <head>
  3. <title>Audio Element Sample</title>
  4. </head>
  5. <body>
  6. <h1>Audio Element Sample</h1>

  7. <!-- Display the audio player with control buttons. -->
  8. <audio src="demo.mp3" controls autoplay loop>
  9. HTML5 audio not supported
  10. </audio>
  11. </body>
  12. </html>
复制代码

       向网页中添加音频的主要方法是使用 audio 元素。 与大部分新的 HTML5 支持一样,如果用户的浏览器不支持 HTML5 audio 元素(旧的浏览器会出现此情况),则 audio 元素允许您使用错误消息或其他播放技术进行回滚。 您可以在 audio 标记间放置一条错误消息(如以下示例所示),也可以为外部播放器控件(例如,Silverlight 浏览器插件)插入代码。下面的代码示例演示了一个播放音频文件的简单网页。
  
       将 audio 元素直接添加到 HTML 代码中,这将使用 src 特性指定要播放的音频文件,并使用 controls 特性以使用内置的播放器控件。 如果您使用的是浏览器的内部播放器,则无需其他脚本。 各个浏览器中的内部播放器可能会在样式或功能上有所不同。
  
       在 Windows Internet Explorer 9 中,audio 元素将显示一个简单播放器,其中包含基本的播放、暂停、位置滑块和音量控制。 该播放器还显示文件的播放时间和剩余时间。 如果您将鼠标指针悬停在时间显示上,则可快进或快退 30 秒。

  


  Internet Explorer 9 中的 audio 元素还支持两个特性,即 autoplay 和 loop。autoplay 将告知 Windows Internet Explorer,在加载完 audio 对象后立即加载并播放音频文件。 这与使用 bgsound HTML 元素类似。 与 bgsound 不同,“暂停”和“播放”控制允许网页用户关闭声音。 loop 特性会持续从头开始重新播放声音文件。 如果您不需要任何内部控件,则不使用特性。
  
       在该示例中,文件 "demo.mp3" 是您自己的文件的占位符。 如果音频文件位于网页的源代码所在的目录,则只需指定文件名即可。 如果音频文件位于其他目录中,则包括路径。如果该文件位于其他网站中,则使用完全限定的域和路径。
  
       可在 HTML 中单独实现 audio 元素时,利用脚本,您可通过使用自己的按钮、创建播放列表或将状态添加到播放中来改进您的网页。 有关对 audio 元素编写脚本的更多信息,请参见使用 JavaScript 控制 Audio 对象。

相关帖子

发表于 2015-9-17 15:08:08 | 显示全部楼层
路过 帮顶 嘿嘿
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部