HTML5中使用audio元素播放音频

1. 首先介绍的是JS代码如何检测当前浏览器是否支持某种音频格式。主要使用audio的canPlayType()方法:

   function checkAudio(){

      var myAudio = document.createElement('audio');

      if(myAudio.canPlayType){

          if(""!=myAudio.canPlayType('audio/mpeg')){

                  document.write("您的浏览器支持mp3编码。
");

           }

            if(""!=myAudio.canPlayType('audio/mp4;codecs="mp4a.40.5")){

                  document.write("您的浏览器支持acc编码。
");

           }

           if(""!=myAudio.canPlayType('audio/ogg;codecs="vorbis")){

                  document.write("您的浏览器支持acc编码。
");

           }

      }

   }


2. audio元素的几个重要属性

   a. autobuffer: 即自动缓冲,但不播放,默认为false.如果使用autoplay则会被忽略。

   b. autoplay: 音频加载足够时即开始播放

   c. controls: 用于指定浏览器内置播放控件。如果不指定,那么页面上不会显示播放器。

   d. loop:指定是否循环播放。

   e. muted: ture开启静音,false未开启静音。

   f. src:指定媒体资源的url地址。

   g. volume:获取或设置媒体资源的播放音量,范围为0.0-1.0.0.0为静音。

3.audio元素的几个重要方法:

    a. canPlayType方法 - 用于检测浏览器是否支持某种媒体类型。

    b. load方法 - 可用于重新载入媒体。

    c. pause方法 - 暂停媒体播放

    d. play方法- 播放媒体。


4. 播放音频例子

    

    

  

  

   

           

          

         您的浏览器不支持audio标签

   

   

   

    如果ogg支持则播放ogg文件,否则继续查看mp3文件是否支持,如果都不支持则显示文本。


5. 背景音乐



 



你可能感兴趣的:(Web)