audiojs--跨浏览器的HTML音频播放器(可自定义样式)
一款跨浏览器的音频播放器,可惜例子和文档都比较少
英文文档 官网
使用方法:
第一步引用文件:
<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 playeras.push(testAS); // add "testAS" object to "as" array of objectsconsole.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'},
audiojs--跨浏览器的HTML音频播放器(可自定义样式)相关推荐
- 自定义制作音频播放器_使用HTML5制作音频播放器,第3部分:微数据和皮肤
自定义制作音频播放器 In the first two articles of this series I introduced the concept and code of a customize ...
- jquery:使用 SoundManager 2 创建简单的网页音频播放器
官网:http://www.schillmania.com/projects/soundmanager2/ HTML5 标准中加入了两个非常强大的标签 audio 和 video ,让我们在网页中嵌入 ...
- 用html做成的音频播放器,HTML5制作酷炫音频播放器插件图文教程
上图便是这个音频播放器的UI界面图,里面还隐藏了一个歌曲的播放列表.整个播放器的UI除了大背景的人像图和歌曲的星星评分使用了图片其他全部由CSS和font-face绘制而成,看上去有难度的地方就只有C ...
- web音频播放器_Web设计:如何创建一个时尚的Web音频播放器
我仍然记得在2000年代初,在线播放富媒体(音频和视频)时遇到了很多限制. 很容易就将开始视为理所当然,尤其是自从今天以来,我们有很多商店可以播放音频,例如last.fm或播放视频,例如Youtube ...
- wordpress html5音乐播放器,15个可集成到WordPress的免费HTML5音频播放器
有时候,浏览一些网站或者博客的时候可见到它们会插入一个音频播放器,可以播放音乐,这样可以增加吸引力.接下来将为大家介绍15个基于HTML5技术可以嵌入到WordPress或者其它网站的免费音频播放器. ...
- vue2.x 音频播放器 使用element ui + Audio实现一款完整的音频播放器
项目背景 audio 音频播放在多媒体开发中非常常见,但是实际项目中你就会发现,每个系统的audio音频界面都长的不一样,百花齐放... pw怎么会同意呢[哈哈],马上掏出手机,你改成长这个样子就好了 ...
- HTML5音频播放器资源免费下载
Javascript-audio-fx AudioFX Javascript 库,一个简单的HTML5 Audio Helper Library SoundManager 2 SoundManager ...
- html原生音频播放器倍速,HTML5倍数功能视频播放器(加速2倍,1.5倍播放)
HTML5倍数功能视频播放器(加速2倍,1.5倍播放) 倍数功能视频播放器的应用: 培训场景,教育教学场景下,可以倍速观看视频,比如1.5倍,2倍的速度观看视频,可以更快速的看完课程,节省时间. va ...
- moodeaudio 源码_MoodeAudio 音频播放器上手配置
MoodeAudio 是运行于树莓派等开发板的高品质音频播放系统.与 Volumio 类似,又有些许不同.它们声音表现是基本一致的,各种配置选项差别不大,MoodeAudio 所提供的选项稍多,播放功 ...
最新文章
- 机器学习:分类,回归,聚类
- nginx开发遇到的问题
- 【LeetCode笔记】226. 翻转二叉树(Java、递归)
- BZOJ2646 : neerc2011 flight
- python使用全局变量的坑,要使用global
- [转载] Python的变量与常量与基本命名规则
- python123.io能不能补交作业_作业分配问题-回溯法-Python3
- .net 集合分成几个等数量集合_一课研究之集合图的应用教学设计
- matlab 7.0安装教程
- 用Redis给Java做优惠卷过期
- 手把手教你在 Vue 中使用 JSX,不怕学不会!【建议收藏】
- 网页加速系列(六)、 网页加速之进阶下篇
- php删除文件找回,在文件管理删除的视频怎么找回?
- 货效,坪效,人效,这三效怎么理解?
- 异地容灾系统方案设计与分析
- 工程行业管理系统-专业的工程管理软件-提供一站式服务
- Proteus仿真p时出现Cannot open‘***\LISA5476.SDF’的错误
- C - error: converting to execution character set:Illegal byte sequence
- fullpage的使用方法及配置项 (慕课网视频总结)
- 产品经理在公司一般都是干什么?