󰅡收起

艾码汇

互联网营销设计、运营推广进阶笔记

Vultr VPS
01
一月

微信小程序支持背景音乐播放

作者: 艾慧
分类: 设计主题
共 3733字
发布时间: 2018-01-01 16:06

在微信小程序里播放音频,我们有 wxParse(升级版), 这个插件能够解析 HTML 里面的 audio 标签,在网页上能播放的音频,在小程序里就能播放。但是这个插件解决不了的问题是背景音乐的播放。为什么一定要背景音乐播放呢?因为大部分手机在屏幕静止操作半分钟左右都会息屏,而息屏了,所有应用都会退出。比如在晚上临睡前,我们希望听个故事啥的,手机屏幕一黑,故事就停了,这多别扭啊?所以,我们需要背景音乐播放,在用户退出应用之后,音频仍然能够在手机中继续播放。

腾讯有 wx.playbackgroundaudio 这个组件支持背景音乐的播放,我们在开发小程序的时候,用上这个组件就好了。

先看一下效果:

要实现这个效果,我们需要后端传给前端两个参数,一个是唱片封面图片的网址,一个是音频文件的网址。我在这里仅就前端开发展开介绍。

我们为小程序注册一个页面 pages/audio/audio,包含以下四个文件:

audio.js

audio.wxml

audio.json

audio.wxss

下面是 audio.js 的关键部分:

var Api = require('../../utils/api.js');
var util = require('../../utils/util.js');
var WxParse = require('../../wxParse/wxParse.js');
var app = getApp()

Page({
data: {
isplay:0,
animation: '',
settimeobj:'',
title:'',
pic:'',
audiosrc:'',
playico: "../../images/play.png",
pauseico: "../../images/pause.png",
stopico: "../../images/stop.png",
ctrimg: "../../images/play.png"
},

storyBindViewTap: function () {
var id = e.currentTarget.dataset.id
getApp().objid = id
wx.navigateTo({
url: '../audio/audio'
})
},

//旋转动画
playfun: function () {
var self = this;
var animationobj = wx.createAnimation({
duration: 1400,
timingFunction: 'linear',
delay: 0,
transformOrigin: '50% 50% 0',
});

var i = 0;
self.settimeobj = setInterval(function () {
animationobj.rotate(180 * (++i)).step()
self.setData({
animation: animationobj.export()
})
}.bind(self), 750)
},

//暂停旋转
pausefun:function(){
var self = this;
var animationobj = wx.createAnimation({
duration: 1000,
timingFunction: 'step-start',
delay: 0,
transformOrigin: '50% 50% 0',
})
animationobj.rotate(0).step()
self.setData({
animation: animationobj.export()
})
clearInterval(self.settimeobj);
},

//控制操作图标
ctr_audio: function (event){
var self = this;
if (self.data.isplay == 0){
self.playfun()
self.setData({ ctrimg: self.data.pauseico,isplay:1})
self.audioPlay()
}else{
self.pausefun()
self.setData({ ctrimg: self.data.playico, isplay: 0 })
self.audioPause()
}
},

//播放
audioPlay: function () {
var self = this;
wx.playBackgroundAudio({
dataUrl: self.data.audiosrc
})

},

//暂停
audioPause: function () {
wx.pauseBackgroundAudio()
},

//停止
audioStop: function () {
wx.stopBackgroundAudio()
},

//启动页面
onLoad: function (options) {
this.fetchDetailData(options.id);
var self = this;

/**
* 监听音乐停止
*/
wx.onBackgroundAudioStop(function() {
self.stopfun()
self.setData({ ctrimg: self.data.stopico, isplay: 0 })
});

},

getPlayStatus:function(){
var self = this;
wx.getBackgroundAudioPlayerState({
success: function (res) {
var status = res.status
if (status == 1 && self.data.audiosrc == res.dataUrl) {
self.playfun()
self.setData({ ctrimg: self.data.stopico, isplay: 1 })
} else if (status == 2) {
self.stopfun()
self.setData({ ctrimg: self.data.playico, isplay: 0 })
}
}
})
},

//获取文章内容
fetchDetailData: function (id) {
var self = this;
wx.request({
url: 'xxxxxx', //后端网址
success: function (response) {
console.log(response.data);
self.setData({
detail: response.data,
postID: id,
audioposter: response.data.audioposter, //后端json文件中给出的唱片封面网址
audiosrc: response.data.audiosrc, //后端json文件中给出的音频网址
display: 'block'
});
wx.setNavigationBarTitle({
title: response.data.title.rendered,
success: function (res) {
// success
}
});
}
});
}
})

而 audio.wxml 中需要在 container 里面加上这一段:

<view class="circle" id="rotate" animation="{{animation}}" mode="scaleToFill" style="background:#ffffff url('{{audioposter}}') no-repeat; ">
<view class="circle_smart"></view>
</view>
<view class="ctr" bindtap="ctr_audio">
<image src="{{ctrimg}}" class="ctrimg"></image>
</view>

最后,将唱片的样式写入 audio.wxss:

/*******音乐播放器开始*********/
.circle{
width: 300px;
height: 300px;
background-size:300px 300px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
margin:0 auto;
line-height: 300px;
vertical-align: middle;
border: 1px dashed #f2f2f2;
position:relative;

}

.circle_smart{
position:absolute;
width:30px;
height:30px;
background:#ffffff;
background-size:30px 30px;
border-radius:50%;
-webkit-border-radius:50%;
border:25px solid #f2f2f2;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;

}

.ctr{margin-top:15px;text-align: center;}
.ctrimg{width:40px;height:40px;}

这样,小程序就能够顺利地播放背景音乐了。现在,去做个音频方面的小程序试试吧,不论是情感类还是教育类,人气都很旺的哦!

作者:三藏 来源:红人网络

Vultr VPS

版权声明:艾码汇 除原创声明皆来源于网络搜集,转载请保留原文出处

一条评论

  1. Chi 2018年1月3日 下午8:56

    此方法适用做音乐,视频,广播小程序