vue 移动端ios语音播放WAV格式语音文件

<template>
  <div class="voice-play-back">
    <p class="voice-detail" @click="toDetail">详情</p>
    <audio
      @timeupdate="updateProgress"
      controls
      ref="audioRef"
      hidden
      @ended="audioEnded"
    >
      <!-- <source src="https://robot.wewecall.com/unified-service/background/file/download?cache=true&url=znkf/M02/51/96/rBoKDmJ4t1iAZmyDADBaYMczSa4149.WAV" type="audio/wav" /> -->
      <source :src="fileurl" type="audio/wav" v-if="fileurl" />
      您的浏览器不支持音频播放
    </audio>
    <div class="audio-right">
      <div class="audio-time">
        <span id="audioCurTime">{{ audioStart }}</span>
        <span>/</span>
        <span>{{ duration }}</span>
      </div>

      <!-- <div class="progress-bar-bg" id="progressBarBg" v-dragto="setAudioIcon">
        <div class="progress-bar" id="progressBar"></div>
      </div> -->
      <van-slider
        v-model="value"
        bar-height="8px"
        button-size="18px"
        active-color="var(--Color)"
        @change="onChange"
        @drag-start="dragStart"
        class="progress-bar"
      />
      <img
        src="@/assets/greenImgs/voice/bofang.png"
        v-show="audioStatus == 'play'"
        alt=""
        @click="playAudio"
      />
      <img
        v-show="audioStatus == 'pause'"
        src="@/assets/greenImgs/voice/zanting.png"
        alt=""
        @click="playAudio"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      audioStatus: "play",
      audioStart: "00:00",
      duration: "00:00",
      value: 0,
      isMove: false,
      fileurl: "",
    };
  },
  computed: {},
  mounted() {
    this.getDetail();
  },
  methods: {
    toDetail() {
      this.audioStatus = "play";
      this.$emit("toDetail");
    },
    getDetail() {
      if (this.$route.query.id) {
        //拿到id说明是智能外呼过来的数据
        let params = {
          whid: this.$route.query.id,
          operationType: "getCalloutResult",
          beanName: "znWhglService",
        };

        this.$Api
          .agentRemote(params, {
            needForm: true,
          })
          .then((res) => {
            axios({
              methods: "GET",
              url: res.data.result.aHref,
              responseType: "blob",
            })
              .then((res) => {
                console.log("***********123", res);
                const binaryData = [];
                binaryData.push(res.data);
                this.fileurl = window.URL.createObjectURL(
                  new Blob(binaryData, { type: "audio/wav" })
                );

                this.fetch();
              })
              .catch((err) => {
                console.log(err);
              });
          });
      }
    },
    //开始拖动的时候
    dragStart() {
      console.log("开始拖动");
      let audio = this.$refs.audioRef;
      if (this.audioStatus == "pause") {
        audio.pause();
        this.audioStatus = "play";
      }
    },
    onChange(value) {
      console.log("2222");
      let audio = this.$refs.audioRef;
      // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
      let ratemin = value / 100;
      audio.currentTime = audio.duration * ratemin;
      audio.play();
      this.audioStatus = "pause";
    },
    fetch() {
      var myVid = this.$refs.audioRef;
      myVid.loop = false;

      if (myVid != null) {
     // ios与安卓的不同获取音频时长的方式
    //在微信浏览器中还是不可以，其他浏览器中可以，最后取了接口返回的音频时长
        if (this.$utils.ckos() == "ios") {
          myVid.addEventListener("loadedmetadata", () => {
            const totalTime = myVid.duration || 0;
            console.log("22222", totalTime);
            this.duration = this.transTime(myVid.duration); // 计算音频时长
          });
        } else {
          myVid.oncanplay = () => {
            console.log("22222", myVid.duration);
            this.duration = this.transTime(myVid.duration); // 计算音频时长
          };
        }
        myVid.volume = 0.5; // 设置音量50%
      }
    },
    // 播放暂停控制
    playAudio() {
      let recordAudio = this.$refs.audioRef; // 获取audio元素
      if (recordAudio.paused) {
        recordAudio.play();
        this.audioStatus = "pause";
      } else {
        recordAudio.pause();
        this.audioStatus = "play";
      }
    },
    // 更新进度条与当前播放时间
    updateProgress(e) {
      var Progressvalue = e.target.currentTime / e.target.duration;
      let recordAudio = this.$refs.audioRef; // 获取audio元素
      if (recordAudio) {
        this.value = Progressvalue * 100;
        if (e.target.currentTime === e.target.duration) {
          this.audioStatus = "pause";
        }
      } else {
        this.audioStatus = "pause";
      }
      this.audioStart = this.transTime(this.$refs.audioRef.currentTime);
    },
    audioEnded() {
      this.audioStatus = "play";
    },
    /**
     * 音频播放时间换算
     * @param {number} value - 音频当前播放时间，单位秒
     */
    transTime(time) {
      var duration = parseInt(time);
      var minute = parseInt(duration / 60);
      var sec = (duration % 60) + "";
      var isM0 = ":";
      if (minute === 0) {
        minute = "00";
      } else if (minute < 10) {
        minute = "0" + minute;
      }
      if (sec.length === 1) {
        sec = "0" + sec;
      }
      return minute + isM0 + sec;
    },
    setAudioIcon() {
      this.audioStatus = "pause";
    },
  },
};
</script>

<style lang="less"  scoped>
.voice-play-back {
  padding: 0 20px;
  .voice-detail {
    text-align: right;
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #57bd77;
    margin-bottom: 30px;
    margin-top: -50px;
  }
}

.audio-right {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .progress-bar {
    flex: 1;
    margin-right: 25px;
  }
  .audio-time {
    width: 190px;
    font-size: 26px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    display: flex;
    min-height: 10px;
    // font-family: monospace;
    // font-variant-numeric: tabular-nums;
    font-variant-numeric: tabular-nums;
  }
  img {
    width: 50px;
    margin-left: 10px;
  }
}
</style>