HTML5+CSS3从入门到精通之移动开发之路（15）HTML5中的音频-职坐标

HTML5+CSS3从入门到精通之移动开发之路（15）HTML5中的音频

沉沙 2018-11-23 来源：阅读 1101 评论 0

摘要：本篇教程探讨了HTML5+CSS3从入门到精通之移动开发之路（15）HTML5中的音频，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

本篇教程探讨了HTML5+CSS3从入门到精通之移动开发之路（15）HTML5中的音频，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通。

浏览器虽然发展很快，但是浏览器中的标准还是不完善，在HTML4+CSS2+JS的前段开发中让很多程序员头疼的就是浏览器的兼容性问题，音频播放也一样，直到现在，仍然不存在一项网页上播放视频和音频的标准。现在，在大多数浏览器中，音频是通过插件（比如:flash插件）来播放的。然而，不是所有浏览器都具有这样的插件，所以对音频的播放造成了一定的麻烦。在HTML5的新标准中规定了一种通过audio元素来包含音频的标准方法，下面我们就来详细的了解一下该标签。

一、对音频格式的支持

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

       IE 9  Firefox 3.5  Opera 10.5  Chrome 3.0  Safari 3.0
    Ogg Vorbis     √  √  √
    MP3  √        √  √
    Wav     √  √     √

二、如何使用

    [html] view plaincopyprint?

        <!DOCTYPE html>
        <html>
            <body>
                <audio src="//www2.shengda.edu.cn/ytw/gbzx/photo/bgmusic.mp3" controls="controls">
                您的浏览器不支持该HTML5标签
                </audio>
            </body>
        </html>

    点击开始按钮，播放歌曲（用的是MP3格式，只适用于IE9以上及Chrome3.0以上浏览器）

    control属性显示控制台

    <audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的

    要运行其他浏览器也支持就要使用如下方式

    [html] view plaincopyprint?

        <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>

三、audio标签的属性

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

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

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