小程序 实现语音播放功能

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>put-audio" s-for="{{audioArr}}" s-for-item="v" s-for-index="key"> <!-- 默认状态isplay=F --> <viewclass="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 = 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 () {
        // 用户点击右上角转发
    }
})