微信小程序|音频音乐播放控制

简介: 微信小程序|音频音乐播放控制

具体内容

一.音频控制

在微信小程序API中我们知道:有wx.playVoice(OBJECT)即在微信小程序中插入音频,插入代码如下:

wX . startRecord ( {

success : function(res){

var tempFilePath = res. tempFilePath

WX . playVoice({

filePath : tempFilePath,

complete: function(){

})

}

})

注:在微信小程序中同一时间只能播放一段音频,若要播放下一段音频只能在中断上一段音频的前提下播放。

因此暂停正在播放的语音。再次调用wx.playVoice播放同一个文件时,会从暂停处开始播放。如果想从头开始播放,需要先调用wx.stopVoice。列出如下代码:

wx. startRecord({

success: function(res){

var tempFilePath = res. tempF ilePath

WX . playVoice({

filePath: tempF ilePath

})

setTimeout(function( ){

//暂停播放

WX . pauseVoice()

}, 5000)

}

})

当然并不是所有的音频都会是在听完之后结束,需要考虑的还有在一些情况下也需要在特定时段结束音频,由此可写入以下代码:

wX. startRecord({

success : function(res){

var tempFilePath = res. tempF ilePath

WX . p1ayVoice({

filePath : tempFilePath

})

setTimeout( function( ){

WX . stopVoice()

}, 5000 )

}

})

二.音乐播放

控制小程序中的音乐播放获取音乐状态以如下代码引入:

wX . getBackgroundAudioPlayerState({

success :function(res){

var status = res . status

var dataUrl = res . dataUrl

var currentPosition = res . currentPos  ition

var duration = res . duration

var downloadPercent = res .  downloadPercent

}

})

然而使用后台播放器播放音乐,对于微信客户端来说,只能同时有一个后台音乐在播放。当用户离开小程序后,音乐将暂停播放;当用户点击“显示在聊天顶部”时,音乐不会暂停播放;当用户在其他小程序占用了音乐播放器,原有小程序内的音乐将停止播放。设定方法如下

Wx . playBackgroundAudio({

dataUrl :

11

title:

cover ImgUrl:

})

另外也可以进行音乐暂停以及停止播放

Wx . playBackgroundAudio({

dataUrl :

11

title:

cover ImgUrl:

})//音乐暂停

WX . stopBackgroundAudio( )

//停止播放


结语

音乐音频的播放是小程序绝不可少的组成部分,在小程序中已经足够满足热门需求,完善了音乐播放器的种种功能,更好的提升了小程序的用户体验度,所以引入播放器固然重要,播放器中的各类基础功能才是开发者最需要去设计使用的重点。


目录
相关文章
|
1月前
|
小程序 JavaScript
微信小程序【视频、音频】
微信小程序【视频、音频】
21 1
|
7月前
|
小程序 Java 数据安全/隐私保护
基于微信小程序的音乐平台 毕业设计 JAVA+Vue+SpringBoot+MySQL
基于微信小程序的音乐平台 毕业设计 JAVA+Vue+SpringBoot+MySQL
|
9月前
|
小程序
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
840 0
|
6月前
|
小程序
微信小程序wx.createInnerAudioContext播放play报错errMsg: “operateAudio:fail jsapi has no permission, event=ope
微信小程序wx.createInnerAudioContext播放play报错errMsg: “operateAudio:fail jsapi has no permission, event=ope
|
13天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的原创音乐小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的原创音乐小程序的详细设计和实现
12 1
|
5月前
|
小程序 JavaScript 前端开发
微信小程序的音频视屏播放
微信小程序的音频视屏播放
42 0
|
5月前
|
小程序
微信小程序音频后台播放功能
微信小程序音频后台播放功能
196 0
|
5月前
|
小程序 JavaScript 前端开发
微信小程序音频,视频播放
微信小程序音频,视频播放
35 0
|
8月前
|
小程序 数据库
基于微信小程序的在线音乐+数据库(附源码)
基于微信小程序的在线音乐+数据库(附源码)
|
9月前
|
小程序 JavaScript 视频直播
Vue视频直播,解决Web端+小程序端同时播放问题
Vue视频直播,解决Web端+小程序端同时播放问题
329 0

热门文章

最新文章