微信小程序之音乐控制播放(audio的API)
2017-05-25 16:15
671 查看
一.小知识
1.wx.getBackgroundAudioPlayerState(OBJECT):获取后台音乐播放状态。
2.wx.playBackgroundAudio(OBJECT)
3.wx.pauseBackgroundAudio()暂停播放音乐。
4.wx.seekBackgroundAudio(OBJECT)控制音乐播放进度。
6.wx.onBackgroundAudioPlay(CALLBACK)监听音乐播放。
7.wx.onBackgroundAudioPause(CALLBACK)监听音乐暂停。
8.wx.onBackgroundAudioStop(CALLBACK)监听音乐停止。
二.案例
1.wx.getBackgroundAudioPlayerState(OBJECT):获取后台音乐播放状态。
wx.getBackgroundAudioPlayerState({ success: function(res) { var status = res.status var dataUrl = res.dataUrl var currentPosition = res.currentPosition var duration = res.duration var downloadPercent = res.downloadPercent } })
2.wx.playBackgroundAudio(OBJECT)
wx.playBackgroundAudio({ dataUrl: '', title: '', coverImgUrl: '' })
3.wx.pauseBackgroundAudio()暂停播放音乐。
4.wx.seekBackgroundAudio(OBJECT)控制音乐播放进度。
wx.seekBackgroundAudio({ position: 30 })5.wx.stopBackgroundAudio()停止播放音乐。
6.wx.onBackgroundAudioPlay(CALLBACK)监听音乐播放。
7.wx.onBackgroundAudioPause(CALLBACK)监听音乐暂停。
8.wx.onBackgroundAudioStop(CALLBACK)监听音乐停止。
二.案例
<view class="zn-uploadimg"> <button type="primary" bindtap="listenerButtonPlay">播放</button> <button type="primary" bindtap="listenerButtonPause">暂停</button> <button type="primary" bindtap="listenerButtonSeek">设置播放进度</button> <button type="primary" bindtap="listenerButtonStop">停止播放</button> <button type="primary" bindtap="listenerButtonGetPlayState">获取播放状态</button> </view>
.zn-uploadimg{ padding:1rem; } .zn-uploadimg button{ margin:10px; }
//record.js
//获取应用实例
Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
/**
* 监听音乐播放
*/
wx.onBackgroundAudioPlay(function() {
console.log('onBackgroundAudioPlay')
})
/**
* 监听音乐暂停
*/
wx.onBackgroundAudioPause(function() {
console.log('onBackgroundAudioPause')
})
/**
* 监听音乐停止
*/
wx.onBackgroundAudioStop(function() {
console.log('onBackgroundAudioStop')
})
},//播放音乐
listenerButtonPlay: function() {
wx.playBackgroundAudio({
//播放地址
dataUrl: 'http://sc1.111ttt.com/2016/1/09/28/202280605509.mp3',
title: '青云志',
//图片地址
coverImgUrl: 'http://r1.ykimg.com/050E0000576B75F667BC3C136B06E4E7'
})
},
/**
* 播放状态
*/
listenerButtonGetPlayState: function() {
wx.getBackgroundAudioPlayerState({
success: function(res) {
console.log(res)
//duration 总时长
//currentPosition 当前播放位置
//status 播放状态
//downloadPercent 下载状况 100 即为100%
//dataUrl 当前播放音乐地址
}
})
},
/**
* 监听button暂停按钮
*/
listenerButtonPause: function() {
wx.pauseBackgroundAudio();
},
/**
* 设置进度
*/
listenerButtonSeek: function() {
wx.seekBackgroundAudio({ position: 30 })
},
/**
*停止播放
*/
listenerButtonStop: function() {
wx.stopBackgroundAudio()
}
})
相关文章推荐
- 微信小程序使用audio组件播放音乐功能示例【附源码下载】
- 微信小程序例子——使用audio组件播放音乐
- 【微信小程序】android音乐播放playBackgroundAudio播放失败解决方案
- 开发 | 微信小程序audio音频播放组件+api_wx.createAudioContext
- 微信小程序-使用audio组件播放音乐
- 微信小程序把玩(三十四)Audio API
- 微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
- 微信小程序把玩(三十四)Audio API
- 微信小程序-图片、录音、音频播放、音乐播放、视屏、文件
- 微信小程序 audio音频播放详解及实例
- Chromium M34上Audio API(HTMLMediaElement)播放音乐不能获取currentTime属性更新
- 微信小程序组件:audio及api
- 微信小程序 —— 自定义带进度条的音频播放控件audio
- 微信小程序 音乐播放(十三)
- 微信小程序之----audio音频播放
- HTML5之audio:键盘控制音乐播放
- Js控制HTML5 Audio 音乐播放和关闭
- 在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式
- 定时播放音乐程序之三:MCI设备的播放和控制
- 微信小程序demo:QQ音乐;音乐搜索,音乐列表及播放停止