[微信音频播放器] html5 audio 制作的微信播放器

weixinAudio.js

一个简单的微信样式播放器

播放器DOM及CSS是微信里内置的音频播放器的样式，重新创建了控制层js，方便在在公众号，APP等场景使用。

例子

demo

地址

github

如何使用

通过以下demo来实现

HTML模板

<p class="weixinAudo"><audio src="../sound/sound.mp3" id="media" width="1" height="1" preload></audio><span id="audio_area" class="db audio_area"><span class="audio_wrp db"><span class="audio_play_area"><i class="icon_audio_default"></i><i class="icon_audio_playing"></i></span><span id="audio_length" class="audio_length tips_global">3:07</span><span class="db audio_info_area"><strong class="db audio_title">标题</strong><span class="audio_source tips_global">来源</span></span><span id="audio_progress" class="progress_bar" style="width: 0%;"></span></span></span>
</p>

Js调用

//你需要先引入一个jQuery
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/weixinAudip.js"></script>
<script>$('.weixinAudo').weixinAudio(options);
</script>

options/初始化参数

Option	Type	Default	Description
`autoplay`	Boolean	false	播放器是否在初始化时自动播放
`src`	String	—	如果audio标签上没设定src属性，可在初始化时设置

API/执行方法

Method	Parameters	Description
`play()`	—	播放方法
`pause()`	—	暂停方法
`changsrc()`	`src,callback`	`src`:播放的地址;`callback`:回调函数

1. html5，audio音乐播放器
2. HTML5音频播放器
3. 音频播放器
4. 微信小程序：音乐播放器
5. 微信视频播放
6. HTML5音频播放
7. IOS微信音乐播放问题
8. 用HTML5实现音乐播放器和视频播放器
9. js仿微信语音播放
10. html5---音频视频播放

[微信音频播放器] html5 audio 制作的微信播放器相关推荐

html5比html4的音频使用方法,HTML5 audio标签的用法示例
您的位置:首页 - 教程 - HTML5 - 正文 HTML5 audio标签的用法示例标签定义声音,比如音乐或其他音频流.html5 audio可以不用Flash插件就可以听音乐看视频,并不是全部 ...
m4a html 播放器,HTML5 Audio m4a
问题 Is it possible to play m4a music files using html5 audio? If that is not possible do you know of ...
html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
html 图片自动滚动播放,javascript+html5实现仿flash滚动播放图片的方法
本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...
php如何开发调色器,HTML5+Js制作的一款简易调色器
今天用HTML5结合Javascript制作了一款调色器,主要功能是通过移动滑块可以看到颜色的变化,并且rgb值也会随着变化,另外也可以通过输入rgb值来预览颜色.使用的技术其实很简单,滑动条使用ht ...
html5 audio 获取播放时间,html5 audio 延时获取播放路径播放失败
为什么audio对象在延时1000毫秒之后就不能执行播放呢? 歌曲的路径需要从数据库中获取,所以需要用ajax来交互,但是发现假如时间过长即使获取到路径也不能执行播放. 为方便测试使用setTimeo ...
html ie浏览器视频无法播放视频,HTML5视频以Chrome格式播放,但不播放IE9
我已经尝试了你可以在互联网上找到的所有混合物,这里关于编码,htaccess和视频元素标记,但是我无法在IE9中播放这些视频,而它们在Chrome中完美运行.有谁知道魔法仙尘让这个工作?在IE中显示的 ...
html5(mp4)无法播放,关于HTML5中Video标签无法播放mp4的解决办法
1.首先先排除掉代码问题.路径问题.浏览器不支持问题等常规问题,这些问题另行百度. 2.首先我自己从网上下载的一个MP4文件,IE10和谷歌都能正常播放.然后自己用格式化工厂转换了一个RMVB文件为M ...
微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github 创建一个vue实例 var app = new Vue({ el: '#app ...

[微信音频播放器] html5 audio 制作的微信播放器

weixinAudio.js

例子

地址

如何使用

HTML模板

Js调用

options/初始化参数

[微信音频播放器] html5 audio 制作的微信播放器相关推荐

最新文章

热门文章