黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

更新时间：2018/9/3 下午1:32:54

更新说明：添加音乐的loop设置和ended事件监听

loop为ture的时候不执行ended事件

const wx = new WxAudio({

ele: '.wx-audio',

title: '河山大好',

disc: '许嵩',

src: '。。。。',

width: '320px',

loop: true,

ended: function() {

var src = '。。。。'

var title = '她说'

var disc = '林俊杰'

wx.audioCut(src, title, disc)

}

})

发布时间：2018-4-4 1:01

wx-audio

微信公众号音乐播放器

基于原生js写的一款仿微信公众号的音乐组件

实例化音乐组件

var wxAudio = new Wxaudio({

ele: '#textaudio1',

title: '河山大好',

disc: '许嵩',

src: 'http://.....mp3',

width: '320px'

});

方法

// 实例化的wxAudio可以这样操作

wxAudio.audioPlay() // 播放

wxAudio.audioPause() // 暂停

wxAudio.audioPlayPause() // 播放暂停

wxAudio.showLoading(bool) //显示加载状态参数bool

wxAudio的audioCut(src,title,disc) 实现音频切换的效果

新增音乐组件切歌方法

通过实例化的wxAudio的audioCut(src,title,disc) 实现音频切换的效果示例代码如下

var src = '.....mp3'

var title = '她说'

var disc = '林俊杰'

wxAudio.audioCut(src, title, disc)

网址：http://www.jq22.com/jquery-info18575

下载：jq22wx-audio2691201804040100.zip

转载于:https://www.cnblogs.com/huangcong/p/9809714.html

黄聪：原生js的音频播放器，兼容pc端和移动端（原创）相关推荐

电脑端音乐播放器html5,原生js的音频播放器，兼容pc端和移动端（原创）
插件描述:基于原生的音频播放器效果,小巧易用更新时间:2018/12/10 下午3:08:16 更新说明: 1. 更新demo的音频地址 2. 组件的图片地址使用本地base64的图片格式更新时间 ...
原生JS实现——自定义播放器
多媒体 1.常用方法: load() :加载 play():播放 pause():暂停注:JQ中没有提供对视频播放控件的方式,如果要操作视频播放,必须使用原生的js方法 ...
原生js html音乐播放器(歌词滚动)
本周学习了js的,用老师教的敲了一个音乐播放器准备工作首先随便找首歌然后用一个小工具扒它的歌词前期准备完成代码部分现在就开始写 html 和 css 了很简单就不解释了直接上代码 h ...
vue3+howler.js实现音频播放，兼容大多数音频格式
howler.js中文网址:http://www.npmdoc.org/howlerzhongwenwendanghowler-jszhongwenjiaochengjiexi.html howler ...
网页调用JS音频播放器兼容所有浏览器，包括IE6,7,8,9,FF,GOOGLE,OPERA,360等
1.引入JS,或者把它下载下来 <script src="//api.html5media.info/1.1.8/html5media.min.js"></scr ...
原生js打造自定义播放器
用到的技术,主要是video的相关知识:实现的功能是去掉自带的控制条,按自己想要的形式设置视频的控制条:有播放与暂停(play()方法和pause()方法).拖拽控制条控制视频的播放进度,并且控制条随 ...
HTML，js自制MP3音频播放器
HTML,js自制音频播放器示意图演示效果 MP3音频播放器文件结构 HTML代码 <!DOCTYPE html> <html><head><meta ...
【jquery】一款不错的音频播放器——Amazing Audio Player
前段时间分享了一款视频播放器,点击这里.今天介绍一款不错的音频播放器--Amazing Audio Player. 介绍: Amazing Audio Player 是一个使用很方便的 Windows ...
html仿微信语音播放器,原生js仿微信音频播放器
今天看个类似微信音频播放器的效果: 简单使用使用比较简单,直接配置如下: var wx_audio = new WxAudio({ ele: ".wx-audio", title ...

黄聪：原生js的音频播放器，兼容pc端和移动端（原创）

wx-audio

黄聪：原生js的音频播放器，兼容pc端和移动端（原创）相关推荐

最新文章

热门文章