今晚鼓捣的audio.js一些小经验

今晚闲着无聊，就鼓捣了下html5播放器，总共试了几个开源api，最后找到了audio.js，最后有了一点点小经验，记录一下

 

1.github下载js:http://kolber.github.io/audiojs/

2.解压文件夹至任意目录

3.新建一个html文件。这里我是直接在js文件内部新建的文件

 

4.编写html

　　1）按照官方的指导：首先要包含它的js文件，就是在html文件中包含它,这里需要注意自己的js相对于html的位置

<script src="audio.min.js"></script>

　　2）初始化audio.js文件

<script>
      audiojs.events.ready(function() {
        var as = audiojs.createAll();
      });
</script>

　　3）编写自己的代码。这里我找到的官方的实例，简单的修改了一下，所以最终代码是

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>audio.js</title>
    <script src="audio.min.js"></script>
    <script>
      audiojs.events.ready(function() {
        var as = audiojs.createAll();
      });
    </script>
  </head>
  <body>
    <p>Url file</p>
    <audio preload="auto">
      <source src="http://bbsimg.shangdu.com/UserFiles/File/4982/1887/1840/1236694485905.mp3">
    </audio>

    <p>Load local file</p>
    <audio preload="auto">
      <source src="xxx.mp3">
    </audio>
  </body>
</html>

5.代码编写完毕，接下来就是测试了.下面的就是效果图：

　　测试发现url文件缓冲极慢，因此此api不适用于播放网络歌曲，最好是用来播放本地文件

6.补充：下面的两段代码效果一样

<audio src="xxx.mp3" preload="auto" />
<audio preload="auto">
      <source src="xxx.mp3">
</audio>

 

7.preload的4个参数：

　　1)none:无

　　2)auto:默认

　　3)autoplay：自动播放     直接在src后面加 auto ，不是proload=“autoplay”

　　4)loop：循环　　　　　　同上

posted @ 2013-11-16 23:37  渲染的青春  阅读(3495)  评论(0)  编辑  收藏  举报