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

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

具体内容

一.音频控制

在微信小程序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( )

//停止播放


结语

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


目录
相关文章
|
5月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐播放器附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的音乐播放器附带文章和源代码设计说明文档ppt
42 3
|
5月前
|
JavaScript Java 测试技术
原创音乐小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
原创音乐小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
32 1
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
25 0
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的音乐播放器小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的音乐播放器小程序附带文章源码部署视频讲解等
21 1
|
4月前
|
小程序 前端开发 JavaScript
微信小程序|音乐播放器小程序设计与实现
微信小程序|音乐播放器小程序设计与实现
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的在线音乐网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的在线音乐网站附带文章和源代码部署视频讲解等
34 7
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的音乐管理系统附带文章和源代码部署视频讲解等
30 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的音乐播放器小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的音乐播放器小程序附带文章源码部署视频讲解等
18 0
|
4月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐播放器的设计和实现附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的音乐播放器的设计和实现附带文章和源代码部署视频讲解等
22 0
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp微信小程序的音乐播放器的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的音乐播放器的详细设计和实现
33 0

热门文章

最新文章

下一篇
无影云桌面