html结构
<view class="output-audio" s-for="{{audioArr}}" s-for-item="v" s-for-index="key"><!-- 默认状态isplay=F --><view class="audio" s-if="{{!v.isplay}}" bindtap="play" data-key="{{key}}" data-id="{{v.id}}" data-isplay="{{v.isplay}}"><image class="ico" src="/images/yin.png"></image><image class="ico2" src="/images/xian.png"></image><text class="time">{{v.time}}</text></view><!-- 正在播放状态isplay=T --><view class="audio audio2" s-else bindtap="stop" data-key="{{key}}" data-id="{{v.id}}" data-isplay="{{v.isplay}}"><image class="ico" src="/images/yin.png"></image><image class="ico2" src="/images/xian.gif"></image><text class="time">{{v.time}}</text></view></view>
css样式
page{background: #f0f0f0;}.audio{width: 60%; padding: 20rpx;margin: 10rpx 30rpx; border-radius: 10rpx;background-color: #25D9CE;border: 1px solid #f0f0f0; overflow: hidden; }.ico{width: 30rpx; height: 45rpx; float: left;}.ico2{width: 60rpx; height: 23rpx;margin-left: 20rpx;margin-top: 20rpx;}.time{float: right; font-size: 30rpx;color: #fff;margin-top: 5rpx;}
JS方法
const myaudio = wx.createInnerAudioContext();Page({data: {audioArr: [{id: '000',src: '/mda-ic7mxzt5cvz6f4y5/mda-ic7mxzt5cvz6f4y5.mp3',time: '1:20"',isplay: false},{id: '001',src: '/mda-ic7mxzt5cvz6f4y5/mda-ic7mxzt5cvz6f4y5.mp3',time: '2:20"',isplay: false},]},//音频播放 play: function (e) {var that = this,id = e.currentTarget.dataset.id,key = e.currentTarget.dataset.key,audioArr = that.data.audioArr,vidSrc = audioArr[key].src;myaudio.src = vidSrc;myaudio.autoplay = true;//切换显示状态for (var i = 0; i < audioArr.length; i++) {audioArr[i].isplay = false;}var isplay = 'audioArr[' + key + '].isplay'//必须把数组变成字符串this.setData({[isplay]: true})//开始监听myaudio.onPlay(() => {that.setData({audioArr: audioArr})})//结束监听myaudio.onEnded(() => {audioArr[key].isplay = false;that.setData({audioArr: audioArr,})})},// 音频停止stop: function (e) {var that = this,id = e.currentTarget.dataset.id,key = e.currentTarget.dataset.key,audioArr = that.data.audioArr,vidSrc = audioArr[key].src;myaudio.src = vidSrc;//切换显示状态for (var i = 0; i < audioArr.length; i++) {audioArr[i].isplay = false;}audioArr[key].isplay = false;myaudio.stop();//停止监听myaudio.onStop(() => {audioArr[key].isplay = false;that.setData({audioArr: audioArr,})})//结束监听myaudio.onEnded(() => {audioArr[key].isplay = false;that.setData({audioArr: audioArr,})})},onLoad: function () {// 监听页面加载的生命周期函数},onReady: function () {// 监听页面初次渲染完成的生命周期函数},onShow: function () {// 监听页面显示的生命周期函数},onHide: function () {// 监听页面隐藏的生命周期函数},onUnload: function () {// 监听页面卸载的生命周期函数},onPullDownRefresh: function () {// 监听用户下拉动作},onReachBottom: function () {// 页面上拉触底事件的处理函数},onShareAppMessage: function () {// 用户点击右上角转发}})
如果觉得《小程序 实现语音播放功能》对你有帮助，请点赞、收藏，并留下你的观点哦！
