- 需求的场景描述（希望解决的问题）
- 希望提供的能力
wxml：
<!-- 语音播放 -->
<view class=‘audiosBox’>
<!-- <view class=“audioOpen”> -->
<image class=‘image2’ src="/assets/icon/play2.png" bindtap=“listenerButtonPlay” wx:if="{{!isOpen}}"/>
<!-- </view> -->
<!-- <view class=“audioOpen” > -->
<image class=‘image2’ src="/assets/icon/play1.png" bindtap=“listenerButtonPause” wx:if="{{isOpen}}"/>
<!-- </view> -->
<!-- 时间 -->
<view class=‘timeLong’>
<text class=‘times’>{{starttime}} </text> <!-- 进度时长 -->
<text class=‘times’>/ {{duration}}</text>
</view>
<view class=‘slid’>
<slider bindchange=“sliderChange” block-size=“12px” step=“2” value="{{offset}}" max="{{max}}" selected-color="#4c9dee" />
</view>
<image src=’/assets/icon/stop1.png’ class=‘iconImage’ wx:if="{{!isShow}}" bindtap=‘isShow’></image>
<image src=’/assets/icon/stop.png’ class=‘iconImage1’ wx:if="{{isShow}}" bindtap=‘isShow1’></image>
</view>
wxss:
/* 语音播放 */
.audiosBox{
width:100%;
margin: auto;
height: 130rpx;
display: flex;
justify-content: space-between;
align-items: center;
background: #f6f7f7;
border-radius: 10rpx;
overflow: hidden;
}
.image2{
width:66rpx;
height:68rpx;
background-color:#ccc;
margin-left:10rpx;
}
.timeLong{
width:23%;
display: flex;
}
.timeLong>text{
width:100%;
}
.times{
width: 100rpx;
text-align: center;
display: inline-block;
font-size: 24rpx;
color:#999999;
margin-top: 5rpx;
}
.timeLong>text:nth-child(1){
color: #4c9dee;
margin-left:6rpx;
}
/*进度条长度 */
.slid{
flex: 1;
position: relative;
}
slider{
width:274rpx;
margin-left:27rpx;
}
/* 音频right */
.iconImage{
width:53rpx;
height:86rpx;
position:relative;
right:145rpx;
}
.iconImage1{
width:45rpx;
height:50rpx;
position:relative;
right:145rpx;
}
js:
// subPages/serve/scenIcSpot/scenlcSpot.js
//获取应用实例
const bgMusic = wx.getBackgroundAudioManager()
var app=getApp()
Page({
/**
* 页面的初始数据
*/
data: {
// 音频
isShow:false,//是否静音
isOpen: false,//播放开关
starttime: ‘00:00’, //正在播放时长
duration: ‘06:41’, //总时长
src:‘http://119.3.196.255/information/scenic/mp3/1550983333478.mp3’,
// 组件所需的参数
nvabarData: {
showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示
title: ‘景点介绍’, //导航栏 中间的标题
},
height: getApp().globalData.height*2+20
},
/**
* 生命周期函数–监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数–监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数–监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数–监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数–监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数–监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
// 视频
// 视频学习
// 视频错误提示
videoErrorCallback: function (e) {
console.log(‘视频错误信息:’);
console.log(e.detail.errMsg);
},
videoPlay: function (e) {
var curIdx = e.currentTarget.dataset.index;
// 没有播放时播放视频
if (!this.data.playIndex) {
this.setData({
playIndex: curIdx
})
var videoContext = wx.createVideoContext(‘video’ + curIdx) //这里对应的视频id
videoContext.play()
} else { // 有播放时先将prev暂停，再播放当前点击的current
var videoContextPrev = wx.createVideoContext(‘video’ + this.data.playIndex)
if (this.data.playIndex != curIdx) {
videoContextPrev.pause()
}
this.setData({
playIndex: curIdx
})
var videoContextCurrent = wx.createVideoContext(‘video’ + curIdx)
videoContextCurrent.play()
}
},
// 语音播放
// 播放
listenerButtonPlay: function () {
var that = this
//bug ios 播放时必须加title 不然会报错导致音乐不播放
bgMusic.title = ‘此时此刻’
bgMusic.epname = ‘此时此刻’
bgMusic.src = that.data.src;
bgMusic.onTimeUpdate(() => {
console.log(bgMusic)
//bgMusic.duration总时长 bgMusic.currentTime当前进度
console.log(bgMusic.currentTime)
var duration = bgMusic.duration;
var offset = bgMusic.currentTime;
var currentTime = parseInt(bgMusic.currentTime);
var min = “0” + parseInt(currentTime / 60);
var max = parseInt(bgMusic.duration);
var sec = currentTime % 60;
if (sec < 10) {
sec = “0” + sec;
};
var starttime = min + ‘:’ + sec; /* 00:00 */
that.setData({
offset: currentTime,
starttime: starttime,
max: max,
changePlay: true
})
})
//播放结束
bgMusic.onEnded(() => {
that.setData({
starttime: ‘00:00’,
isOpen: false,
offset: 0
})
console.log(“音乐播放结束”);
})
bgMusic.play();
that.setData({
isOpen: true,
})
},
//暂停播放
listenerButtonPause() {
var that = this
bgMusic.pause()
that.setData({
isOpen: false,
})
},
listenerButtonStop() {
var that = this
bgMusic.stop()
},
// 进度条拖拽
sliderChange(e) {
var that = this
var offset = parseInt(e.detail.value);
bgMusic.play();
bgMusic.seek(offset);
that.setData({
isOpen: true,
})
},
// 页面卸载时停止播放
onUnload() {
var that = this
that.listenerButtonStop()//停止播放
console.log(“离开”)
},
// 静音与否
isShow(){
let that=this;
var audioInnerCtxWord = null //播发器
if (wx.createInnerAudioContext) {
audioInnerCtxWord = wx.createInnerAudioContext() //微信内部的audio
console.log(audioInnerCtxWord)
audioInnerCtxWord.obeyMuteSwitch = true //不遵循静音开关,即静音下也能播放
} else {
that.audioCtxWord = wx.createAudioContext(‘playerWord’) //页面中的audio组件
}
that.setData({
isShow:true
})
},
isShow1() {
var audioInnerCtxWord = null //播发器
if (wx.createInnerAudioContext) {
audioInnerCtxWord = wx.createInnerAudioContext() //微信内部的audio
console.log(audioInnerCtxWord)
audioInnerCtxWord.obeyMuteSwitch =true//不遵循静音开关,即静音下也能播放
} else {
that.audioCtxWord = wx.createAudioContext(‘playerWord’) //页面中的audio组件
}
let that = this;
that.setData({
isShow:false
})
}
})
强力驱动