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

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

具体内容

一.音频控制

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

//停止播放


结语

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


目录
相关文章
|
30天前
|
小程序 JavaScript
微信小程序【视频、音频】
微信小程序【视频、音频】
29 1
|
7天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的电影播放平台附带文章和源代码部署视频讲解等
9 0
|
18天前
|
JavaScript Java 测试技术
原创音乐小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
原创音乐小程序+springboot+vue.js附带文章和源代码设计说明文档ppt
21 1
|
8天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的在线音乐网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的在线音乐网站附带文章和源代码部署视频讲解等
20 7
|
10天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的在线云音乐系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的在线云音乐系统附带文章和源代码部署视频讲解等
7 0
|
11天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的少数民族音乐网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的少数民族音乐网站附带文章和源代码部署视频讲解等
7 0
|
11天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的音乐管理系统附带文章和源代码部署视频讲解等
19 4
|
11天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的音乐产品购物网站附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的音乐产品购物网站附带文章和源代码部署视频讲解等
11 0
|
24天前
|
小程序 JavaScript Java
音乐小程序|基于微信开发音乐小程序的系统设计与实现(源码+数据库+文档)
音乐小程序|基于微信开发音乐小程序的系统设计与实现(源码+数据库+文档)
35 0
|
30天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的原创音乐小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的原创音乐小程序的详细设计和实现
20 1

热门文章

最新文章