vue music player

For the properties of the audio object, you can directly read or assign them, and the method needs to be called

 

Common operations

//播放(继续播放)
audio.play();
 
//暂停
audio.pause();
 
//停止
audio.pause();
audio.currentTime = 0;
 
//重新播放
audio.currentTime = 0;
audio.play();

也可以动态的创建<audio>元素
//方式1
var audio = document.createElement("audio");
audio.src = "hangge.mp3";
audio.play();
 
//方式2
var audio = new Audio("hangge.mp3");
audio.play();


通过canPlayType()方法可以判断浏览器支持的编码方式，从而设置对应的音频文件。
if (audio.canPlayType("audio/mp3")) {
    audio.src = "hangge.mp3";
}else if(audio.canPlayType("audio/ogg")) {
    audio.src = "hangge.ogg";
}

 

audio  related api

<audio src=”audio address”>Alternate (content displayed when the browser does not support audio)</audio>

Control function function description

• load() loads audio and video software, usually does not need to be called, unless it is a dynamically generated element, used to preload before playback
• play() loads and plays audio and video files, and restarts playback by default unless the file has been paused elsewhere
• pause() Pause the audio and video files in the playing state

The read-only media features of audio are:

read-only property property description

• duration Get the playback duration of the media file, in s, or NaN if it cannot be obtained
• paused true if the media file is paused, false otherwise
• ended returns true if the media file has finished playing
• startTime returns the starting playback time, usually 0.0, unless it is a buffered media file and part of the content is no longer in the buffer
• error The error code returned after an error has occurred
• currentSrc returns the playing or loaded file as a string, corresponding to the file selected by the browser in the source element

 

Audio Scriptable property values:

• autoplay Automatically play the loaded media file, or query whether it is set to autoplay
• loop Set the media file to loop, or query whether it has been set to loop
• currentTime returns the time from the start of playback to the present in s. You can also set the value of currentTime to jump to a specific position
• controls show or hide the user control interface
• volume Set the volume value between 0.0 and 1.0, or query the current volume value
• muted Set whether to mute
• autobuffer Whether to perform buffer loading before playing the media file, if autoplay is set, this feature is ignored

 

Audio Object Properties

Attributes	describe
audiotracks	Returns an AudioTrackList object representing the available audio tracks.
autoplay	Sets or returns whether to play audio when ready (loaded).
buffered	Returns a TimeRanges object representing the buffered portion of the audio.
controller	Returns a MediaController object representing the audio's current media controller.
controls	Sets or returns whether the audio should show controls (like play/pause, etc.).
crossOrigin	Set or return CORS settings for audio.
currentSrc	Returns the URL of the current audio.
currentTime	Sets or returns the current playback position in the audio (in seconds).
defaultMuted	Sets or returns whether the audio is muted by default.
defaultPlaybackRate	Sets or returns the default playback speed for audio.
duration	Returns the length of the audio in seconds.
ended	Returns whether audio playback has ended.
error	Returns a MediaError object representing the audio error state.
loop	Sets or returns whether the audio should play again at the end.
mediaGroup	Sets or returns the name of the media combination to which the audio belongs.
muted	Set or return whether to turn off the sound.
networkState	Returns the current network state of the audio.
paused	Sets or returns whether the audio is paused.
playbackRate	Sets or returns the speed of audio playback.
played	Returns a TimeRanges object representing the played portion of the audio.
preload	Sets or returns the value of the audio's preload property.
readyState	Returns the current ready state of the audio.
seekable	Returns a TimeRanges object representing the addressable portion of the audio.
seeking	Returns whether the user is currently looking in the audio.
src	Sets or returns the value of the audio's src attribute.
textTracks	Returns a TextTrackList object representing the available text tracks.
volume	Set or return the audio volume.

Audio object methods

method	describe
addTextTrack()	Add a new text track to the audio.
canPlayType()	Checks whether the browser can play the specified audio type.
fastSeek ()	Specify the playback time in the audio player.
getStartDate()	Returns a new Date object representing the current timeline offset.
load()	Reload the audio element.
play()	Start playing audio.
pause()	Pause the currently playing audio.

 

 

 

When binding a style, if the style is a string, it needs to be enclosed in quotation marks, otherwise it will be calculated as an attribute

The controls property is a bool value used to display the default controls

You can use the audio method to operate

<template>
  <div class="container">
    <ul class="music-list">
      <li v-for="(music,index) in musics" :class="index==cur_music?'playing':'common'">{{music.title}} <button @click="click_item(index)">play</button></li>

    </ul>
    <div class="control">
    <button @click="prev">上一首</button>
    <button @click="stop">暂停</button>
    <button @click="play">播放</button>
      <button @click="next">下一首</button>
      <button @click="mute">静音</button>
      <button @click="show">显示</button>
      <br>
    <audio ref="audio" :src="musics[cur_music]['url']" controls></audio>
    </div>
  </div>
</template>

<script>
  export default {
    name: "music-card",
    data() {
      return {
        cur_music:0,
        musics: [
          {
            title: '远方',
            url: 'http://localhost/static/mp3/%E8%BF%9C%E6%96%B9.mp3'
          },
          {
            title: '太早',
            url: 'http://localhost/static/mp3/%E5%A4%AA%E6%97%A9.mp3'
          },
          {
            title:'告白气球',
            url: 'http://localhost/static/mp3/%E5%91%8A%E7%99%BD%E6%B0%94%E7%90%83.mp3'
          },
          {
            title:'你一定要是个孩子',
            url:'http://localhost/static/mp3/%E4%BD%A0%E4%B8%80%E5%AE%9A%E8%A6%81%E6%98%AF%E4%B8%AA%E5%AD%A9%E5%AD%90.mp3'
          }

        ]
      }
    },
    methods: {
      prev() {
        console.log('prev');
        this.cur_music = (this.musics.length+this.cur_music-1)%this.musics.length

      },
      stop() {
        console.log('stop');
        this.$refs.audio.pause()
      },
      next() {
        console.log('next');
        this.cur_music = (this.cur_music+1)%this.musics.length
      },
      play(){
        console.log('play');
        this.$refs.audio.play()
      },
      click_item(index){
        this.cur_music= index
        // 切换时视图刷新是异步的，所以需要在刷新后执行播放方法
        this.$nextTick(
          ()=>{
            this.$refs.audio.currentTime =10
            this.$refs.audio.loop=true
            this.$refs.audio.play()

          }
        )
      },
      mute(){
        this.$refs.audio.muted=true
      },
      show(){
        
        this.$refs.audio.controls = !this.$refs.audio.controls
      }

    },
    mounted(){
      console.log(this.$refs)
    }
  }
</script>

<style scoped>
  .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .playing{
    background: aqua;
  }
  .common{
    background: aliceblue;
  }
</style>