audioPlay.vue

<template>
    <div class="audioOff">
      <div class="ofplayBox">
        <audio id="audio" :src="src" @canplay ="onplay" @play="playOn"></audio>
        <div class="isPlayImg">
          <!--开始播放-->
          <img v-if="!playflg" @click="play()" :src="playUrl" />
          <!--暂停-结束播放-->
          <img v-if="playflg" @click="stop()" :src="stopUrl" />
        </div>
        <!--slider进度条-->
        <div class="progress" @mousedown="stopTime()">
          <input type="range" min="0" :max="offset" v-model="rangeValue"   />
        </div>
        <div class="duration"><span>{{starttime}}</span>/<span class="right-timer">{{duration}}</span></div>
        <div class="cover"></div>
      </div>
    </div>
</template>

<script>
  import {getwechatParam} from "../../service/api";
  import stopUrl from '../../assets/mould/look1/rs.png'
  import playUrl from '../../assets/mould/look1/rp.png'
  //--创建页面监听，页面加载完毕--触发音频播放

  export default {
    name: 'audioMsg',
    props:[
      'src',
      'autoPlay'
    ],
    data() {
      return {
        stopUrl:stopUrl,
        playUrl:playUrl,
        //这首歌时间有点长 大家测试的时候可以换一个短点的MP3文件
        playflg: false,
        rangeValue: 0,
        starttime: '00:00', //正在播放时长
        duration: '00:00', //总时长
        offset: 0,
        timer:null,
        first:true
      }
    },
    mounted(){
      console.log('触发')
      this.play();
      if(this.autoPlay){
        let that = this;
        document.addEventListener('DOMContentLoaded', function () {
          if(that.first){
            function audioAutoPlay() {
              var musicEle0 = document.getElementById('audio');
              musicEle0.play();
            }
            audioAutoPlay();
          }
        });
        //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
        document.addEventListener('touchstart', function () {
          if(that.first){
            function audioAutoPlay() {
              var musicEle0 = document.getElementById('audio');
              musicEle0.play();
            }
            audioAutoPlay();
          }
        });
        this.autoPlayAudio();
        this.play();
        getwechatParam({
          api_list:'onMenuShareAppMessage',
          url:window.location.href.split('#')[0]
        }).then(res=>{
          let that = this;
          wx.config({
            debug: false,
            appId: res.appId,
            timestamp: parseInt(res.timestamp),
            nonceStr: res.nonceStr,
            signature: res.signature,
            jsApiList: res.jsApiList
          });
          this.autoPlayAudio();
          this.play();
        });
        this.$nextTick(()=>{
          this.first = false
        })
      }
    },
    methods: {
      stopTime(){
        clearInterval(this.timer);
      },
      autoPlayAudio(){
        let that = this;
        let voice =  document.querySelector('#audio');
        document.addEventListener("WeixinJSBridgeReady",function(){
          that.play();
        },false);
        wx.ready(function () {
          that.$nextTick(()=> {
            wx.ready(function () {
              that.$nextTick(()=>{
                if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
                  voice.play();
                } else {
                  //監聽客户端抛出事件"WeixinJSBridgeReady"
                  if (document.addEventListener) {
                    document.addEventListener("WeixinJSBridgeReady", function(){
                      voice.play();
                    }, false);
                  } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", function(){
                      voice.play();
                    });
                    document.attachEvent("onWeixinJSBridgeReady", function(){
                      voice.play();
                    });
                  }
                }
                wx.ready(()=>{
                  voice.play();
                })
              })
            })
          })
        })
      },
      getDuration(){
        let min = null;
        if(parseInt(this.offset / 60)<10){
          min = '0' + parseInt(this.offset / 60)
        }else{
          min = parseInt(this.offset / 60)
        }
        let sec = parseInt(this.offset % 60);
        if (sec < 10) {
          sec = "0" + sec;
        }
        this.duration = min + ':' + sec;   /*  00:00  */
      },
      onplay(){
        let audio = document.querySelector('#audio');
        this.offset = Math.ceil(parseInt(audio.duration));
        this.$nextTick(()=>{
          this.getDuration();
        })
      },
      playOn(){
        let audio = document.querySelector('#audio');
        this.playflg = true;
        this.timer = setInterval(() => {
          let min = null;
          if(parseInt(audio.currentTime / 60)<10){
            min = '0' + parseInt(audio.currentTime / 60)
          }else{
            min = parseInt(audio.currentTime / 60)
          }
          let sec = parseInt(audio.currentTime % 60);
          if (sec < 10) {
            sec = "0" + sec;
          }
          this.starttime = min + ':' + sec;   /*  00:00  */
          this.rangeValue = parseInt(audio.currentTime);
          if(this.rangeValue === this.offset) {
            this.rangeValue=0;/*播放结束后进度条归零*/
            this.starttime='00:00'; /*播放结束后时间归零*/
            this.stop();
            clearInterval(this.timer)
          }
        }, 1000)
      },
      //开始播放
      play() {

        let audio = document.querySelector('#audio');
        audio.play();
      },
      //暂停-结束
      stop() {
        let audio = document.querySelector('#audio');
        audio.pause();
        this.playflg = false
      },
    },
    watch:{
      'rangeValue'(value,value2){
        let audio = document.querySelector('#audio');
        if(Math.abs(value - value2) > 2){
          this.timer = setInterval(() => {
            let min = null;
            if(parseInt(audio.currentTime / 60)<10){
              min = '0' + parseInt(audio.currentTime / 60)
            }else{
              min = parseInt(audio.currentTime / 60)
            }
            let sec = parseInt(audio.currentTime % 60);
            if (sec < 10) {
              sec = "0" + sec;
            }
            this.starttime = min + ':' + sec;   /*  00:00  */
            this.rangeValue = parseInt(audio.currentTime);
            if(this.rangeValue == this.offset) {
              this.rangeValue=0;/*播放结束后进度条归零*/
              this.starttime='00:00'; /*播放结束后时间归零*/
              this.stop()
              clearInterval(this.timer)
            }
          }, 1000);
          audio.currentTime = value;
        }
      }
    }

  }
</script>

<style lang="less" scoped>
  @import "../../util/public";
  input[type=range] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-appearance: none;
    display: flex;
    width: 90%;
    padding: 0 5 * @toVw;
    border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
     height: 2 * @toVw;
    background: #999999;
    border-radius: 1 * @toVw ;
   }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 50%; /*外观设置为圆形*/
    height: 15 * @toVw;
    width:  15 * @toVw;
    margin-top: -6 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
    background: #ffffff;
    border: solid 1* @toVw rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 0 2 * @toVw #3b4547; /*添加底部阴影*/

  }
  .audioOff {
    padding: 5 * @toVw;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #888;
    background: white;
    border-radius: 500px;
  }

  .ofplayBox {
    width: 100%;
    height: 30 * @toVw;
    margin: 0;
    display: flex;
  }

  .isPlayImg {
    width: 40 * @toVw;
    height: 100%;
  }

  .isPlayImg img {
    width: 30 * @toVw;
  }

  .progress {
    flex: 1;
    position: relative;
    font-size: 12px;
  }

  .duration {
    display: flex;
    font-size: 12px;
    margin-left: 5 * @toVw;
    justify-content: space-between;
    span:first-child{
      margin-left: 0;
    }
  }
  .right-timer{
    margin-right: 0.27rem;
  }

  @media screen and (orientation: landscape) {
    .audioOff {
      padding: 2 * @toVw;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 2px solid #888;
      background: white;
      border-radius: 500px;
    }
    input[type=range] {
      -webkit-appearance: none;
      display: flex;
      width: 90%;
      padding: 0 5 * @toVw;
      border-radius: 10px; /*这个属性设置使填充进度条时的图形为圆角*/
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }
    input[type=range]::-webkit-slider-runnable-track {
      height: 2 * @toVw;
      background: #999999;
      border-radius: 1 * @toVw ;
    }
    input[type=range]:focus {
      outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      border-radius: 50%; /*外观设置为圆形*/
      height: 10 * @toVw;
      width:  10 * @toVw;
      margin-top: -4 * @toVw; /*使滑块超出轨道部分的偏移量相等*/
      background: #ffffff;
      border: solid 1* @toVw rgba(205, 224, 230, 0.5); /*设置边框*/
      box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/

    }
    .ofplayBox {
      width: 100%;
      height: 20 * @toVw;
      margin: 0;
      display: flex;
    }

    .isPlayImg {
      width: 24 * @toVw;
      margin-right: 5 * @toVw;
      height: 100%;
    }

    .isPlayImg img {
      width: 20 * @toVw;
    }

    .progress {
      flex: 1;
      position: relative;
      font-size: 12px;
    }
    .duration {
      display: flex;
      font-size: 12px;
      margin-left: 5 * @toVw;
      justify-content: space-between;
      span:first-child{
        margin-left: 0;
      }
    }
    .right-timer{
      margin-right: 0.27rem;
    }

  }
</style>