- 需求的场景描述（希望解决的问题）

- 希望提供的能力

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

})

}

})