audiojs--跨浏览器的HTML音频播放器(可自定义样式)

达摩
• 阅读 13314

一款跨浏览器的音频播放器,可惜例子和文档都比较少

英文文档 官网

使用方法:

第一步引用文件:

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

第二步,全局初始化:

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

第三步,在需要的地方放上下面类似的代码:

<audio src="/mp3/juicy.mp3" preload="auto" /> //注意是直接闭合标签

然后,然后就没有了,WTF!!!

以上只适用静态的页面,如果动态添加音频怎么办?相信好多人都需要这种功能,我也是,费了很大功夫才找到一个方法,如下:

http://stackoverflow.com/ques...

看不懂?没关系,提取有效代码如下:

var as;
audiojs.events.ready(function () {
    as = audiojs.createAll();
});
$(document).ready(function () {
    setTimeout(function () {
        var mp3 = "http://s3.amazonaws.com/audiojs/02-juicy-r.mp3"; // audio.js example
        // creating new audio element, yours is probably added via ajax
        // [0] used to get DOM element instead of jQuery object.
        var audio = $('<audio/>', {id: 'test'}).appendTo('body').attr('src', mp3)[0];
        var testAS = audiojs.create(audio); // initialise new audio.js player
        as.push(testAS); // add "testAS" object to "as" array of objects
        console.log(as); // log "as" - now holds the original objects + "testAS"
    }, 5000); // timeout used for testing, above code can be in ajax success function instead
});

控制HTML样式类名配置

createPlayer: {
                markup: '          <div class="headset"></div>             <div class="playname" id="playname"></div>             <div class="play-pause">             <p class="play"></p>             <p class="pause"></p>             <p class="loading"></p>             <p class="error"></p>           </div>           <div class="scrubber">             <div class="progress"></div>             <div class="loaded"></div><div class="words"> </div>           </div>           <div class="time">             <em class="played">00:00</em>/<strong class="duration">00:00</strong>           </div>           <div class="volume"></div>           <div class="error-message"></div>',
                playPauseClass: 'play-pause',
                scrubberClass: 'scrubber',
                progressClass: 'progress',
                loaderClass: 'loaded',
                timeClass: 'time',
                durationClass: 'duration',
                playedClass: 'played',
                volumeClass: 'volume',
                closingClass: 'closing',
                errorMessageClass: 'error-message',
                playingClass: 'playing',
                loadingClass: 'loading',
                errorClass: 'error'
            },
点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
Wesley13 Wesley13
4年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Stella981 Stella981
4年前
Exceptionless
<divid"cnblogs\_post\_body"class"blogpostbodycnblogsmarkdown"<h1id"exceptionless.netcore开源日志框架"Exceptionless.NetCore开源日志框架</h1<blockquote<p作者:markjiang7m2<b
Wesley13 Wesley13
4年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
4年前
PHP创建多级树型结构
<!lang:php<?php$areaarray(array('id'1,'pid'0,'name''中国'),array('id'5,'pid'0,'name''美国'),array('id'2,'pid'1,'name''吉林'),array('id'4,'pid'2,'n
Wesley13 Wesley13
4年前
Java日期时间API系列36
  十二时辰,古代劳动人民把一昼夜划分成十二个时段,每一个时段叫一个时辰。二十四小时和十二时辰对照表:时辰时间24时制子时深夜11:00凌晨01:0023:0001:00丑时上午01:00上午03:0001:0003:00寅时上午03:00上午0
Stella981 Stella981
4年前
Dubbo爆出严重漏洞!可导致网站被控制、数据泄露!附解决方案
http://dy.163.com/v2/article/detail/F5FPIFRU0511Q1AF.html  !(http://dingyue.ws.126.net/2020/0216/125ec4c4p00q5rcrs0019d200ig009qg00ig009q.png)  来源:华为云  原文地址:https://w
Python进阶者 Python进阶者
2年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
达摩
达摩
Lv1
时间很快就过去了,之后才想到自己还有没有完成的事情
文章
4
粉丝
0
获赞
0