zoukankan      html  css  js  c++  java
  • 今晚鼓捣的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:循环      同上

  • 相关阅读:
    Python 列表浅拷贝与深拷贝
    Linux 基本命令-----常用操作分类
    硬盘的分区方式
    github中fork的使用
    大O记号
    python的__file__和__name__变量
    python生成器
    python装饰器
    re模块元字符
    python_数据类型_list
  • 原文地址:https://www.cnblogs.com/q812717031/p/3427346.html
Copyright © 2011-2022 走看看