示例代码：

<template> <view class="imt-audio"> <view class="audio-wrapper"> <view class="audio-control-wrapper"> <view class="audio-control audio-control-switch" :class="{audioLoading:loading}" style="{borderColor:color}" @click="audio.paused?play():audio.pause()"> {{loading?'':(paused?'':'')}}</view>
</view>
<view style="display: flex;width: 100%;align-items: center;">
<view class="audio-number">{{format(current)}}</view>
<slider class="audio-slider" :activeColor="color" block-size="16" :value="current" :max="duration"
@changing="seek=true,current=$event.detail.value" @change="audio.seek($event.detail.value)">
</slider>
<view class="audio-number">{{format(duration)}}</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
audio: uni.createInnerAudioContext(),
current: 0, //当前进度(s)
duration: 0, //总时长(s)
paused: true, //是否处于暂停状态
loading: false, //是否处于读取状态
seek: false //是否处于拖动状态
}
},
props: {
src: String, //音频链接
autoplay: Boolean, //是否自动播放
continue: Boolean, //播放完成后是否继续播放下一首，需定义@next事件
control: {
type: Boolean,
default: true
}, //是否需要上一曲/下一曲按钮
color: {
type: String,
default: '#FFCB00'
} //主色调
},
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)
},
//点击播放按钮
play() {
this.audio.play()
this.loading = true
}
},
created() {
if (this.src) {
this.audio.src = this.src
this.autoplay && this.play()
}
try{
this.audio.obeyMuteSwitch = false
}catch(e){
//TODO handle the exception
}

        //音频进度更新事件  
        this.audio.onTimeUpdate(() => {  
            console.info(this.seek,this.paused,this.current,this.audio.currentTime)  
            if (!this.seek) {  
                this.current = this.audio.currentTime  
            }  
            if (!this.duration) {  
                this.duration = this.audio.duration  
            }  
        })  
        //音频播放事件  
        this.audio.onPlay(() => {  
            console.info(this.paused,this.loading )  
            this.paused = false  
            this.loading = false  
        })  
        //音频暂停事件  
        this.audio.onPause(() => {  
            console.info(this.paused)  
            this.paused = true  
        })  
        this.audio.onError((res) => {  
          console.log(res.errMsg);  
          console.log(res.errCode);  
        })  
        //音频结束事件  
        this.audio.onEnded(() => {  
            console.info(this.continue)  
            //this.audio.destroy()  
            if (this.continue) {  
                this.next()  
            } else {  
                this.paused = true  
                this.current = 0  
            }  
        })  
        //音频完成更改进度事件  
        this.audio.onSeeked(() => {  
            console.info(222)  
            this.seek = false  
        })  
    },  
    beforeDestroy() {  
        this.audio.destroy()  
    },  
    watch: {  
        src(src, old) {  
            console.info(src, old)  
            this.audio.src = 'http://tbvideo.ixiaochuan.cn/zyad/07/a0/78ac-c7e0-11e8-8d60-00163e00c638' //'http://tbvideo.ixiaochuan.cn/zyad/07/a0/78ac-c7e0-11e8-8d60-00163e00c638'//http://tbvideo.ixiaochuan.cn/zyad/07/a0/78ac-c7e0-11e8-8d60-00163e00c638    //'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3' //src  
            this.current = 0  
            this.duration = 0  
            if (old || this.autoplay) {  
                this.play()  
            }  
        }  
    }  
}  

</script>

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

.imt-audio {  

}  
.audio-wrapper {  
    display: flex;  
    /* justify-content: space-between; */  
    align-items: center;  
}  

.audio-number {  
    width: 120rpx;  
    font-size: 24rpx;  
    line-height: 1;  
    color: #FFFFFF;  
    text-align: center;  
}  

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

.audio-control-wrapper {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    font-family: "icon" !important;  
}  

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

}  

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

.audio-control-switch {  
    font-size: 40rpx;  
    margin: 0 10rpx;  
}  

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

@keyframes loading {  
    to {  
        transform: rotate(360deg);  
    }  
}  

</style>

操作步骤：

预期结果：

#

实际结果：

@