Audio 音频

一、基础用法

<template>
  <div class="audio-demo">
    <se-audio
      :src="src"
      :action="audioAction"
      @play="audioPlayed"
      @pause="audioPaused"
      @timeupdate="audioTimeUpdated"
      @error="getErrMsg"
      controls
      loop
    ></se-audio>
    <div class="btn-groups">
      <se-button @click="playAudio">播放</se-button>
      <se-button @click="pauseAudio">暂停</se-button>
    </div>
    <h4>进度</h4>
    <se-slider :value="0" @change="timeSliderChanged">
      <template v-slot:suffix="scope">
        <span style="position: absolute; right: -40px;">
          {{ scope.value }}
        </span>
      </template>
    </se-slider>
    <h4>播放速率</h4>
    <se-slider
      :min="1"
      :max="4"
      :value="1"
      :marks="marks"
      @change="playbackRateSliderChanged"
      show-marks
    />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        src: 'http://s3.qhres.com/static/1d7774ba4a6a3041.mp3',
        audioAction: {
          method: 'pause'
        },
        duration: 0,
        marks: [1, 2, 3, 4]
      }
    },
    methods: {
      getErrMsg(e) {
        console.log(e.detail)
      },
      audioPlayed() {
        console.log('audio is played')
      },
      audioPaused() {
        console.log('audio is paused')
      },
      audioTimeUpdated(e) {
        this.duration = e.detail.duration
      },
      playAudio() {
        this.audioAction = {
          method: 'play'
        }
      },
      pauseAudio() {
        this.audioAction = {
          method: 'pause'
        }
      },
      timeSliderChanged(e) {
        if (!this.duration) return
        let time = (this.duration * e.detail.value) / 100
        this.audioAction = {
          method: 'setCurrentTime',
          data: time
        }
      },
      playbackRateSliderChanged(e) {
        this.audioAction = {
          method: 'setPlaybackRate',
          data: e.detail.value
        }
      }
    }
  }
</script>
<style scoped>
  .audio-demo {
    width: 400px;
    padding: 0 24px;
  }
  .btn-groups {
    margin: 20px 0;
  }
</style>

Props

Events

MediaError.code

二、AudioContext

创建 InnerAudioContext 实例。

<template>
  <div class="audio-demo">
    <div class="btn-groups">
      <se-button @click="playAudio">播放</se-button>
      <se-button @click="pauseAudio">暂停</se-button>
      <se-button @click="stopAudio">停止</se-button>
    </div>

    <h4>手动调节进度</h4>
    <se-slider @change="timeSliderChanged">
      <template v-slot:suffix="scope">
        <span style="position: absolute; right: -40px;">
          {{ scope.value }}
        </span>
      </template>
    </se-slider>

    <h4>音量</h4>
    <se-slider @change="volumeSliderChanged" :value="50">
      <template v-slot:suffix="scope">
        <span style="position: absolute; right: -40px;">
          {{ scope.value }}
        </span>
      </template>
    </se-slider>

    <h4>进度条</h4>
    <se-progress :percent="percent"></se-progress>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        audio: {},
        duration: 0,
        percent: 0
      }
    },
    mounted() {
      this.audio = this.$createInnerAudioContext()
      this.audio.src = 'http://s3.qhres.com/static/1d7774ba4a6a3041.mp3'

      this.audio.volume = 0.5

      this.audio.onPlay(this.playHandler)
      // this.audio.offPlay(this.playHandler)

      this.audio.onPause(() => {
        console.log('audio is paused')
      })

      this.audio.onTimeUpdate(() => {
        if (!this.duration) return
        this.percent = (this.audio.currentTime / this.duration) * 100
      })
      this.audio.onError(err => {
        console.log(err)
      })
    },
    methods: {
      playHandler() {
        this.duration = this.audio.duration
        console.log('audio is played')
      },
      playAudio() {
        this.audio.play()
      },
      pauseAudio() {
        this.audio.pause()
      },
      stopAudio() {
        this.audio.stop()
      },
      timeSliderChanged(e) {
        if (!this.duration) return
        let time = (this.duration * e.detail.value) / 100
        this.audio.seek(time)
      },
      volumeSliderChanged(e) {
        this.audio.volume = (e.detail.value / 100).toFixed(1)
      }
    },
    beforeDestroy() {
      this.audio.destroy()
    }
  }
</script>

<style scoped>
  .audio-demo {
    width: 400px;
    padding: 0 24px;
  }
  .btn-groups {
    margin: 20px 0;
  }
  .se-progress {
    width: 400px;
  }
</style>

AudioContext 属性

AudioContext 方法