请提供示例代码

页面代码

<template>  
    <view class="">  
        <view class="musicList" v-for="(item, index) in songList" :key="index">  
            <image src="/static/img/public_img/icon_001.png" mode=""></image>  
            <view class="umsic-item">  
                <text>{{item.src}}</text>  
                <image v-if="index === count" @click="stopMusic(index)" src="/static/img/public_img/start.png" mode=""></image>  
                <image v-else @click="duration(index)" src="/static/img/public_img/timeOut.png" mode=""></image>  
            </view>  
        </view>  
        <view class="box">  
            <imt-audio  
             :src="count === -1 ? '' : songList[count].src"  
             :showImg="count === -1 ? '' : songList[count].img"  
             :duration="344"  
             @next="next"  
             @prev="prev"  
             color="#ffb71c"  
            ></imt-audio>  
        </view>  
    </view>  
</template>  
<script>  
    import imtAudio from '@/components/imt-audio/imt-audio.vue'  
    export default {  
        components: { imtAudio },  
        data() {  
            return {  
                count: -1,  
                songList: [  
                    {  
                        src:'http://music.163.com/song/media/outer/url?id=418990139.mp3',  
                        img:'/static/img/public_img/image_10.png',  
                    },  
                    {  
                        src:'http://music.163.com/song/media/outer/url?id=866018207.mp3',  
                        img:'/static/img/public_img/icon_001.png',  
                    },  
                    {  
                        src:'http://music.163.com/song/media/outer/url?id=430685718.mp3',  
                        img:'/static/img/music/imageba_07.png',  
                    }  
                ]  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            duration(index) {  
                this.count = index  
            },  
            // 下一首  
            next() {  
                if (this.count === this.songList.length - 1) {  
                    this.count = 0  
                } else {  
                    this.count++  
                }  
            },  
            // 上一首  
            prev(){  
                if (this.count === 0) {  
                    this.count = this.songList.length - 1  
                } else {  
                    this.count --  
                }  
            },  
            //停止音乐  
        }  
    }  
</script>  

<style lang="scss">  
.musicList{  
        display: flex;  
        align-items: center;  
        margin-top: 12upx;  
        image{  
            width: 75upx;  
            height: 75upx;  
            margin-left: 30upx;  
            margin-right: 40upx;  
        }  
        .umsic-item{  
            width: 605upx;  
            border-bottom: 1px solid #e8e8e8;  
            display: flex;  
            justify-content:space-between;  
            align-items: center;  
            &>text{  
                width: 450upx;  
                overflow:hidden; //超出的文本隐藏  
                text-overflow:ellipsis; //溢出用省略号显示  
                white-space:nowrap; //溢出不换行  
                font-size: 28upx;  
            }  
            image{  
                width: 75upx;  
                height: 75upx;  
                margin-right: 30upx;  
            }  
        }  
    }  
    .box{  
        width:100%;  
        position: fixed;  
        bottom: 0upx;  
        box-shadow: 3upx 3upx 3upx 7upx #f4f4f4;  
    }  
</style>

插件代码

<template>  
    <view class="imt-audio">  

        <view class="audio-wrapper">  
            <!-- <view class="audio-number">{{currentTime}}</view> -->  
            <image  
             :src="showImg =='' ? defaultImg : showImg"  
             style="width: 130upx;height: 130upx;border-radius: 50px;"  
            ></image>  
            <slider  
             class="audio-slider"  
             :activeColor="color"  
             block-size="16"  
             :value="current"  
             :max="duration"  
             @changing="seek=true,current=$event.detail.value"  
             @change="change"  
            ></slider>  
            <!-- <view class="audio-number">{{durationTime}}</view> -->  
        </view>  
        <view class="audio-control-wrapper" :style="{color:color}">  
            <view class="audio-text">{{src}}</view>  
            <view class="audio-control audio-control-prev" v-if="control" :style="{borderColor:color}" @tap="prev">&#xe601;</view>  
            <view class="audio-control audio-control-switch" :class="{audioLoading:loading}" :style="{borderColor:color}" @tap="operation">{{loading?'&#xe600;':(paused?'&#xe865;':'&#xe612;')}}</view>  
            <view class="audio-control audio-control-next" v-if="control" :style="{borderColor:color}" @tap="next">&#xe601;</view>  
        </view>  
    </view>  
</template>  

<script>  
    const audio = uni.createInnerAudioContext(); //创建音频  
    export default {  
        data() {  
            return {  
                defaultImg: '/static/img/public_img/image_10.png',  
                currentTime: '', //当前播放时间  
                durationTime: '', //总时长  
                current: '', //slider当前进度  
                loading: false, //是否处于读取状态  
                paused: true, //是否处于暂停状态  
                seek: false //是否处于拖动状态  
            }  
        },  
        props: {  
            src: String, //音频链接  
            showImg: String, //图片  
            autoplay: Boolean, //是否自动播放  
            duration: Number, //总时长（单位：s）  
            control: {  
                type:Boolean,  
                default:true  
            }, //是否需要上一曲/下一曲按钮  
            continue:Boolean,//播放完成后是否继续播放下一首，需定义@next事件  
            color: {  
                type:String,  
                default:'#169af3'  
            } //主色调  
        },  
        methods: {  
            //返回prev事件  
            prev() {  
                this.$emit('prev')  
            },  
            //返回next事件  
            next() {  
                this.$emit('next')  
            },  
            //格式化时长  
            format(num) {  
                return '0'.repeat(2 - String(Math.floor(num / 60)).length) + Math.floor(num / 60) + ':' + '0'.repeat(2 - String(  
                    Math.floor(num % 60)).length) + Math.floor(num % 60)  
            },  
            //播放/暂停操作  
            operation() {  
                if (this.paused) {  
                    audio.play()  
                    this.loading = true  
                    console.log('start')  
                } else {  
                    audio.pause()  
                    console.log('stop')  
                }  
            },  
            //完成拖动事件  
            change(e) {  
                audio.seek(e.detail.value)  
            }  
        },  
        created() {  
            audio.src = this.src  
            this.current = 0  
            this.durationTime = this.format(this.duration)  
            audio.obeyMuteSwitch = false  
            audio.autoplay = this.autoplay  
            //音频进度更新事件  
            audio.onTimeUpdate(() => {  
                if (!this.seek) {  
                    this.current = audio.currentTime  
                }  
            })  
            //音频播放事件  
            audio.onPlay(() => {  
                this.paused = false  
                this.loading = false  
                console.log('play');  
            })  
            audio.onCanplay(function(){  
                console.log('can play');  
            })  
            //音频暂停事件  
            audio.onPause(() => {  
                this.paused = true  
            })  
            //音频结束事件  
            audio.onEnded(() => {  
                if (this.continue) {  
                    this.next()  
                } else {  
                    this.paused = true  
                    this.current = 0  
                }  
            })  
            //音频完成更改进度事件  
            audio.onSeeked(() => {  
                this.seek = false  
            })  

            audio.onError(res => {  
                console.log(res)  
            })  
        },  
        watch: {  
            //监听音频地址更改  
            src(e) {  
                audio.src = e  
                this.current = 0  
                audio.play()  
                this.loading = true  
            },  
            //监听总时长改变  
            duration(e) {  
                this.durationTime = this.format(e)  
            },  
            //监听当前进度改变  
            current(e) {  
                this.currentTime = this.format(e)  
            }  
        }  
    }  
</script>  

<style>  
    @font-face {  
        font-family: 'icon';  
        src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot');  
        src: url('//at.alicdn.com/t/font_1104838_fxzimc34xw.eot?#iefix') format('embedded-opentype'),  
            url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff2') format('woff2'),  
            url('//at.alicdn.com/t/font_1104838_fxzimc34xw.woff') format('woff'),  
            url('//at.alicdn.com/t/font_1104838_fxzimc34xw.ttf') format('truetype'),  
            url('//at.alicdn.com/t/font_1104838_fxzimc34xw.svg#iconfont') format('svg');  
    }  

    .imt-audio {  
        padding: 30upx;  
        background: #fff;  
        border-radius: 20upx;  
        height: 180upx;  
    }  

    .audio-wrapper {  
        display: flex;  
        align-items: center;  
    }  

    .audio-number {  
        font-size: 24upx;  
        line-height: 1;  
        color: #333;  
    }  

    .audio-slider {  
        flex: 1;  
        margin: 0 30upx;  
    }  

    .audio-control-wrapper {  
        margin-top: -30upx;  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        font-family: "icon" !important;  
    }  
    .audio-text{  
        padding: 10upx;  
        padding-left: 20upx;  
        font-size: 24upx;  
        width: 170upx;  
        overflow:hidden; //超出的文本隐藏  
        text-overflow:ellipsis; //溢出用省略号显示  
        white-space:nowrap; //溢出不换行  
    }  

    .audio-control {  
        font-size: 32upx;  
        line-height: 1;  
        border: 4upx solid;  
        border-radius: 50%;  
        padding: 16upx;  
    }  

    .audio-control-next {  
        transform: rotate(180deg);  
    }  

    .audio-control-switch {  
        font-size: 40upx;  
        margin: 0 80upx;  
    }  

    .audioLoading {  
        animation: loading 2s;  
        animation-iteration-count: infinite;  
        animation-timing-function: linear;  
    }  

    @keyframes loading {  
        to {  
            transform: rotate(360deg);  
        }  
    }  
</style>