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"/imageimage class="ico2" src="/images/xian.png"/imagetext 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"/imageimage class="ico2" src="/images/xian.gif"/imagetext 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 = swan.createInnerAudioContext();Page({    data: {        audioArr: [            {                id: '000',                src: 'http://vd3.bdstatic.com/mda-ic7mxzt5cvz6f4y5/mda-ic7mxzt5cvz6f4y5.mp3',                time: '1:20"',                isplay: false            },            {                id: '001',                src: 'http://vd3.bdstatic.com/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 () {        // 用户点击右上角转发    }})