vue 音乐播放器

对于audio对象的属性，直接读取或者赋值即可，方法需要调用

常用操作

//播放(继续播放)
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 相关的 api

<audio src=”音频的地址”>备用（当浏览器不支持audio时显示的内容）</audio>

控制函数功能说明

load() 加载音频、视频软件，通常不必调用，除非是动态生成的元素，用来在播放前预加载
play() 加载并播放音频、视频文件，除非文件已经暂停在其他位置，否则默认重头开始播放
pause() 暂停处于播放状态的音频、视频文件

audio 的只读媒体特性有：

只读属性属性说明

duration 获取媒体文件的播放时长，以s为单位，如果无法获取，则为NaN
paused 如果媒体文件被暂停，则返回true，否则返回false
ended 如果媒体文件播放完毕，则返回true
startTime 返回起始播放时间，一般是0.0，除非是缓冲过的媒体文件，并一部分内容已经不在缓冲区
error 在发生了错误后返回的错误代码
currentSrc 以字符串形式返回正在播放或已加载的文件，对应于浏览器在source元素中选择的文件

audio 可脚本控制的特性值：

autoplay 自动播放已经加载的的媒体文件，或查询是否已设置为autoplay
loop 将媒体文件设置为循环播放，或查询是否已设置为loop
currentTime 以s为单位返回从开始播放到目前所花的时间，也可设置currentTime的值来跳转到特定位置
controls 显示或者隐藏用户控制界面
volume 在0.0到1.0间设置音量值,或查询当前音量值
muted 设置是否静音
autobuffer 媒体文件播放前是否进行缓冲加载，如果设置了autoplay，则忽略此特性

Audio 对象属性

属性	描述
audioTracks	返回表示可用音频轨道的 AudioTrackList 对象。
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频。
buffered	返回表示音频已缓冲部分的 TimeRanges 对象。
controller	返回表示音频当前媒体控制器的 MediaController 对象。
controls	设置或返回音频是否应该显示控件（比如播放/暂停等）。
crossOrigin	设置或返回音频的 CORS 设置。
currentSrc	返回当前音频的 URL。
currentTime	设置或返回音频中的当前播放位置（以秒计）。
defaultMuted	设置或返回音频默认是否静音。
defaultPlaybackRate	设置或返回音频的默认播放速度。
duration	返回音频的长度（以秒计）。
ended	返回音频的播放是否已结束。
error	返回表示音频错误状态的 MediaError 对象。
loop	设置或返回音频是否应在结束时再次播放。
mediaGroup	设置或返回音频所属媒介组合的名称。
muted	设置或返回是否关闭声音。
networkState	返回音频的当前网络状态。
paused	设置或返回音频是否暂停。
playbackRate	设置或返回音频播放的速度。
played	返回表示音频已播放部分的 TimeRanges 对象。
preload	设置或返回音频的 preload 属性的值。
readyState	返回音频当前的就绪状态。
seekable	返回表示音频可寻址部分的 TimeRanges 对象。
seeking	返回用户当前是否正在音频中进行查找。
src	设置或返回音频的 src 属性的值。
textTracks	返回表示可用文本轨道的 TextTrackList 对象。
volume	设置或返回音频的音量。

Audio 对象方法

方法	描述
addTextTrack()	向音频添加新的文本轨道。
canPlayType()	检查浏览器是否能够播放指定的音频类型。
fastSeek()	在音频播放器中指定播放时间。
getStartDate()	返回新的 Date 对象，表示当前时间线偏移量。
load()	重新加载音频元素。
play()	开始播放音频。
pause()	暂停当前播放的音频。

绑定样式的时候，样式用字符串的话需要使用引号括起来，否则会被当做属性进行计算

controls 属性是一个bool值，用于显示默认的控制组件

可以使用audio的方法操作

<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>

对于audio对象的属性，直接读取或者赋值即可，方法需要调用

Audio 对象属性

Audio 对象方法

猜你喜欢