uni-app 音频audio样式自定义

写项目遇到了，需要改audio的样式，然后就自己写了一个audio的组件

样式图：

 

第一步：对样式进行布局：

<view class="audo-video">
  <video id="myVideo" :src="url" class="hidden" @timeupdate="timeupdate" ref="video" @loadedmetadata="loadedmetadata" ></video>
     <view class="play">
         <view class="play-left">
             <image src="../../static/detail/autions.png" v-show="playshow" @tap="play"></image>  //暂停的图片
             <image src="../../static/detail/autions3.png" v-show="stipshow" @tap="stop"></image> //播放的图片
             <text>{{timer}}/</text>
             <text style="margin-left:84upx;">{{overTimer}}</text>
         </view>
            <view class="play-right">
                <slider
                    @change="sliderChange"
                    @changing="sliderChanging"
                    class="slider" 
                    block-size="16" 
                    :min="0"
                    :max="duration"
                    :value="currentTime"
                    activeColor="#595959"
                    @touchstart="lock= true"
                    @touchend="lock = false"
                    />
            </view>
        </view>
        
    </view>

 

 第二步：在data里面添加默认是数据

return {
                playshow:true, //播放的图片
                stipshow:false, //暂停的图片
                lock: false, // 锁
                status: 1, // 1暂停 2播放
                currentTime: 0,  //当前进度
                duration: 100, // 总进度
                videoContext: '',
            }

 

第三步：用computed方法，对进度条的时间进行监听变化

    computed:{
            timer() {
            
                return calcTimer(this.currentTime)
            },
            overTimer() {
            
                return calcTimer(this.duration)
            }
        },

第四步：给video创建一个动态的id：

created() {
   this.videoContext = uni.createVideoContext('myVideo')
      },

第五步：写播放，暂停和更新进度条等事件

  // 播放
  play() {
    this.stipshow=true;
    this.playshow=false;
    this.status = 2;
    this.videoContext.play();
         }, 
  // 暂停
   stop() {
    this.stipshow=false;
    this.playshow=true;
    this.videoContext.pause()
    this.status = 1
         },
  // 更新进度条
    timeupdate(event) {
       if(this.lock) return; // 锁
          var currentTime,duration;
       if(event.detail.detail) {
          currentTime = event.detail.detail.currentTime
          duration = event.detail.detail.duration
          }
       else {
          currentTime = event.detail.currentTime
          duration = event.detail.duration
            }
          this.currentTime = currentTime
          this.duration = duration
           },
            
            // 拖动进度条
            sliderChange(data) {
                this.videoContext.seek(data.detail.value)
            },
            
            //拖动中
            sliderChanging(data) {
                this.currentTime = data.detail.value
            },
            
            // 视频加载完成
            loadedmetadata(data) {
                this.duration = data.detail.duration
            }

最后 在写一个计算拖动事件的方法就可以了，这个是和data同级的

    function calcTimer(timer) {
        if(timer === 0 || typeof timer !== 'number') {
            return '00:00'
        }
        let mm = Math.floor(timer / 60)
        let ss = Math.floor(timer % 60)
        if(mm < 10) {
            mm = '0' + mm
        }
        if(ss < 10) {
            ss = '0' + ss
        }
        return mm + ':' + ss
    }

css样式附加一部分：

<style scoped lang="scss">    
/deep/.uni-slider-handle-wrapper{
    background: black !important;
}
/deep/.uni-slider-thumb{
    background: black !important;
}
    .play{
               background: #f1f3f4;
               width: 94%;
               height: 124upx;
               position: relative;
               margin: 20px auto 6px auto;
               border-radius: 38px;
    }
    .play-left text{
        margin-top: 1px;
        color: black;
        font-size: 13px;
        line-height: 58px;
        position: absolute;
        
    }
    .slider{
               width: 336upx;
            position: relative;
            margin-top: 42upx;
            color: black;
            float: left;
    }
    .musions{
        width: 26px;
        height: 26px;
           margin: 17px 4px 0 5px;
            float: left;
    }
    .play image{
            width: 26px;
            height: 26px;
               margin: 17px 4px 0 5px;
                float: left;
    }
    .play-left{
        width: 216upx;
        height: 116upx;
        
        float: left;
        border-radius: 38px;
    }
    .play-right{
        width: 66%;
        float: left;
        height: 58px;
        position: relative;
    }
    .audo-video {
           width: 100%;
               position: relative;
               top: -18px;
    }
    .slider-box {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26upx;
        color: #999;
    }
    
    button {
        display: inline-block;
        width: 100upx;
        background-color: #fff;
        font-size: 24upx;
        color: #000;
        padding: 0;
    }
    .hidden {
        position: fixed;
        z-index: -1;
        width: 1upx;height: 1upx;
    }
</style>

最后，附加一个倍数的事件方法：

        <button @tap="setRate(0.5)">0.5倍</button>
        <button @tap="setRate(0.75)">0.75倍</button>
        <button @tap="setRate(1)">1倍</button>
        <button @tap="setRate(1.5)">1.5倍</button>
        <button @tap="setRate(2)">2倍</button>

        // 倍速
        setRate(num) {
           this.videoContext.playbackRate(num)
                     },