“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

You can download the audio site for the test

→ Click to view — downloadable audio website

1. The rendering

The above effect of the code please check the blog → click to view (written in the form of parent and child components)

What I have written at present is mainly showing the playback of a single voice, as shown in the picture below. The address of the article I refer to is → click to view

Multiple voice play order problem, you can view the article → click to view

2. Some code knowledge related to audio

// Reload
this.audio.load();
 
// Returns a Boolean value to determine whether the game is playing
this.audio.paused
 
/ / pause
this.audio.pause();
Copy the code
this.audio = new Audio();
this.audio.src = mp3;
let playPromise; 
playPromise = this.audio.play();
if (playPromise) {
        playPromise.then(() = > {
            // Audio load succeeded
            // Audio playback takes time
          that.tiemr = setInterval(() = > {
            second--;
            if (second <= 0) {
              that.audio.pause()
              clearInterval(that.tiemr); }},1000);
        }).catch((e) = > {
          // Audio load failed
          console.error(e);
        });
      }
Copy the code

3. The above effect code display — VUE project

<template>
	<div>.<div v-if="this.noCompleteAnswerList.code==='1' || this.noCompleteAnswerList.code==='2' || this.noCompleteAnswerList.code==='3'" class="questionName" @click="startPlayOrPause">
		    <audio ref="audio"
		      :src="urlAudio"
		      :preload="audio.preload"
		      @play="onPlay"
		      @error="onError"
		      @waiting="onWaiting"
		      @pause="onPause"
		      @timeupdate="onTimeupdate"
		      @loadedmetadata="onLoadedmetadata">
		    </audio>
		      <div class="imgLaba">
		        <img src="@/assets/image/laba1.png" alt="" v-if="isShowImgAudio">
		        <img src="@/assets/image/laba2.gif" alt="" v-else >
		      </div>
		  </div>
		  <span class="questionName">{{this. NoCompleteAnswerList. ThisQueIndex}}, {{noCompleteAnswerList. Title}}</span>
		</div>.</div>
</template>
Copy the code
<script>
...
export default {
  data () {
    return{...isShowImgAudio: true.// Enter the question type to display the static speaker
      // Play voice broadcast
      audio: {
        currentTime: 0.maxTime: 0.playing: true.// Whether to play automatically
        muted: false.// Whether to mute
        speed: ' '.waiting: true.preload: 'auto'
      },
      sliderTime: 0.volume: 100.speeds: this.theSpeeds,
      controlList: {
        // Do not display downloads
        noDownload: false.// Mute is not displayed
        noMuted: false.// Do not display the volume bar
        noVolume: false.// The progress bar is not displayed
        noProcess: false.// Only one can be played
        onlyOnePlaying: false.// Do not fast forward buttons
        noSpeed: false
      },
      urlAudio: ' '. }},methods: {
    // When audio pauses
    onPause () {
      this.audio.playing = false
    },
    // When an error occurs, the loading state is loaded
    onError () {
      this.audio.waiting = true
    },
    // When the audio starts to wait
    onWaiting (res) {
      // console.log(res)
    },
    // Start playing
    startPlay () {
      this.$refs.audio.play()
    },
    / / pause
    pausePlay () {
      this.$refs.audio.pause()
    },
    // When the speaker is triggered
    startPlayOrPause () {
      // Check whether it is playing
      if (this.$refs.audio.paused) {
        / / play
        this.$refs.audio.play()
        this.isShowImgAudio = false
        // console.log(1)
      } else {
        // Pause \ replay
        this.$refs.audio.currentTime = 0 // Rerun
        this.$refs.audio.play()
        // this.isShowImgAudio = true // Pause
        // this.$refs.audio.pause()
        // console.log(2)}},// Call interface -- get the url of audio
    getUrlAudio () {
      return new Promise(resolve= > {
        const params = { paperLogOid: this.noCompleteAnswerList.tbPaperLogoid }
        this.api.voiceQuestions(params).then(res= > {
          // console.log('111111111111', res)
          if (res.code === 200) {
            this.urlAudio = res.data
            resolve()
          }
        })
      })
    },
    // When the audio starts playing
    onPlay (res) {
      this.audio.playing = true
      this.audio.loading = false

      if (!this.controlList.onlyOnePlaying) {
        return
      }
      const target = res.target
      const audios = document.getElementsByTagName('audio');
      [...audios].forEach((item) = > {
        if(item ! == target) { item.pause() } }) },// When a timeUpdate event occurs approximately once per second, it is used to update the current playback time of the audio stream
    onTimeupdate (res) {
      this.audio.currentTime = res.target.currentTime
      this.sliderTime = parseInt(this.audio.currentTime / this.audio.maxTime * 100)
      if (res.target.currentTime === res.target.duration) { // When the playback time is equal to the total current time, the speaker picture is displayed as a still picture
        this.isShowImgAudio = true}},// When the voice stream metadata is loaded, the event's callback function is triggered
    Voice metadata is mainly data such as the length of the voice
    onLoadedmetadata (res) {
      this.audio.waiting = false
      this.audio.maxTime = parseInt(res.target.duration)
      // this.audio.maxTime = parseInt( this.$refs.audio.duration);
      // console.log(' total time ', this.$refs.audio-duration)
      this.$emit('loading-true'.11)}}... } </script>Copy the code