3-10. audio标签

1、作用: 播放音频

2、在 HTML 中播放声音的方法有很多种。


例如:


3、注意点:

  • audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样
  • 只不过有3个属性不能用, height/width/poster

4、HTML 中播放音频并不容易,确保您的音频文件在所有浏览器中(Internet Explorer, Chrome, Firefox, Safari, Opera)和所有硬件上(PC, Mac , iPad, iPhone)都能够播放,使用插件。

  • 浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
  • 插件有很多用途:播放音乐、显示地图、验证银行账号,控制输入等等。
  • 可使用 标签来将插件添加到 HTML 页面。
  • 这些标签定义资源(通常非 HTML 资源)的容器,根据类型,它们即会由浏览器显示,也会由外部插件显示。
  • 5、使用 HTML5

    
    
    • 效果展示(上面的例子使用了一个 mp3 文件,这样它在 Internet Explorer、Chrome 以及 Safari 中是有效的。
      为了使这段音频在 Firefox 和 Opera 中同样有效,添加了一个 ogg 类型的文件。如果失败,会显示错误消息。)
    • 必须把音频文件转换为不同的格式。

    6、使用 元素

    • 标签定义外部(非 HTML)内容的容器。(这是一个 HTML5 标签,在 HTML4 中是非法的,但是所有浏览器中都有效)。

    • 效果展示
      注意:

    • 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。使用 (HTML5) 解决验证问题。

    • 不同的浏览器对音频格式的支持也不同。

    • 如果浏览器不支持该文件格式,没有插件的话就无法播放该音频。

    • 如果用户的计算机未安装插件,无法播放音频。

    • 如果把该文件转换为其他格式,仍然无法在所有浏览器中播放。

    7、使用 元素

    • 标签也可以定义外部(非 HTML)内容的容器。
    • 效果展示
    • 8、最好的 HTML 解决方法
      下面的例子使用了两个不同的音频格式。HTML5

      
      

      9、最简单的方法:向网站添加音频的最简单方法
      比如雅虎媒体播放器,它能播放 mp3 以及一系列其他格式。通过一行简单的代码,您就可以把它添加到网页中,轻松地将 HTML 页面转变为专业的播放列表。

      Play Sound
      
      

      使用雅虎播放器是免费的。如需使用它,您需要把这段 JavaScript 插入网页底部:

      然后只需简单地把 MP3 文件链接到您的 HTML 中,JavaScript 会自动地为每首歌创建播放按钮:

      Play Song 1
      Play Song 2
      ...
      ...
      ...
      

      雅虎媒体播放器为您的用户提供的是一个小型的播放按钮,而不是完整的播放器。不过,当您点击该按钮,会弹出完整的播放器。
      请注意,这个播放器始终停靠在窗框底部。只需点击它,就可将其滑出。

      10、使用超链接
      如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。
      以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接,浏览器会启动“辅助应用程序”来播放该文件:
      Play the sound

      
      
      
      
      
      
      
      
      
      图片.png

      http://www.w3school.com.cn/tags/tag_audio.asp
      http://www.w3school.com.cn/html/html_audio.asp
      http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

      你可能感兴趣的:(3-10. audio标签)