HTML5-Audio实战总结

最近闲暇时在使用Electron做桌面端应用（仿网易云桌面客户端）于是有接触到audio。由于很久没有写过这标签了 特来此详细做个笔记，方便自己以后查阅。

先放一个auido标签 让他动起来

   <audio 
   		:src="https://music.163.com/song/media/outer/url?id=65847.mp3"
		controls
    ></audio>

一、Audio 对象

Audio 对象属性

Audio 对象方法

二、播放器代码

template

    <div class="audio">
      <audio @ended="next(currentSongUnit.afterId)" ref="audio" @timeupdate="timeupdate"
             preload="auto" :src="audioSrc" />
      <div class="audio-btn fac">
      	<!-- 上一首 -->
        <i @click="next(currentSongUnit.beforeId)"class="iconfont icon-lastSong"/>
        <!-- 播放 -->
        <i @click="play()" v-show="isPause" class="iconfont icon-play" />
        <!-- 暂停 -->
        <i @click="stop()" v-show="!isPause" class="iconfont icon-paused" />
        <!-- 下一首 -->
        <i @click="next(currentSongUnit.afterId)" class="iconfont icon-nextSong"/>
      </div>
      <div class="audio-progressBar fbc">
      	<!-- 歌曲当前播放时间 -->
        <p class="start-tiem audio-tiem">{{ staratTime }}</p>
        <!-- 进度条 -->
        <div>
          <el-slider v-model="progressBarValue" :show-tooltip="false" @change="sliderChange"/>
        </div>
        <!-- 歌曲总时长 -->
        <p class="end-tiem audio-tiem">{{ allTime }}</p>
      </div>
    </div>

script

#部分代码涉及接口 接口我并没有写出来 不好意思
<script>
import { search, getSongDetail } from '@/api/find';
export default {
  name: 'myFooter',

  components: {},

  data() {
    return {
      audio: '',//audio的ref
      hotList: [],//歌曲完整列表
      staratTime: '00:00', //当前播放时间
      progressBarValue: 0,//进度条显示长度 默认为0 范围为0-100 使用前转换
      allTime: '00:00', //歌曲总时间
      isPause: true, //是否暂停 默认暂停
      songsIdList: [], //所有歌曲简化信息
      currentSongUnit: {}, //当前歌曲部分信息
    };
  },

  computed: {
    //歌曲的url
    audioSrc() {
      return `https://music.163.com/song/media/outer/url?id=${this.currentSongUnit.id}.mp3`;
    },
  },
  
  watch: {
  	//当歌曲audioSrc　发生变化时　重新执行load加载歌曲及　getSongDetail获取歌曲相信信息
    audioSrc() {
      this.audio.load();
      this.getSongDetail();
    },
  },

  mounted() {
    this.audio = this.$refs.audio;　／／获取audio的ref
    this.searchMusic();
  },

  methods: {
    //search接口获取陈奕迅的歌单数据 重写数组 只保留id 名字 上/下首歌曲id 
    async searchMusic() {
      const params = { keywords: '陈奕迅' };
      const { result } = await search(params);
      const hotList = result.songs;
      //获取上一曲下一曲id 当前歌曲id,name 重置id数组
      const songsIdList = hotList.map((item, index) => {
        const afterId = hotList[index + 1] ? hotList[index + 1].id : null;
        const beforeId = hotList[index - 1] ? hotList[index - 1].id : null;
        const arr = { id: item.id, name: item.name, afterId, beforeId };
        return arr;
      });
      this.hotList = hotList;//获取到的歌单信息
      this.songsIdList = songsIdList;//重写的数组
      this.currentSongUnit = songsIdList[0];//默认当前播放为第一条
      this.getSongDetail();//执行getSongDetail
    },
    //getSongDetail接口获取当前播放歌曲的详细信息 歌单信息内歌曲list信息不够完善
    async getSongDetail() {
      const { songs } = await getSongDetail(this.currentSongUnit.id);
      const song = songs[0];
      //处理song.ar对象内歌手大于一位时 拼接/ 例: 陈奕迅/薛之谦
      const singer =  song.ar.length > 1
          ? song.ar.map((it) => it.name).join(' / ')
          : song.ar[0].name;
      this.currentSongUnit = {
        ...this.currentSongUnit,
		songName: song.name,
		songAvatar: song.al.picUrl,
        singer,
      };
      this.play();//执行play方法 播放
    },
    //下一首 上一首  播放完毕也回执行该方法
    next(id) {
      if (!id) {  return false; }
      const nextList = this.songsIdList.find((it) => it.id === id);
      this.currentSongUnit = nextList;
    },
    //暂停
    stop() {
      this.audio.pause();
      this.isPause = true;
    },
    //播放　获取完整时间
    play() {
      this.allTime = this.filterDuration(this.audio.duration);
      this.audio.play();
      this.isPause = false;
    },
    //当歌曲实时播放时 获取当前播放时间 设置滚动条位置
    timeupdate() {
      this.staratTime = this.filterDuration(this.audio.currentTime);
      this.progressBarValue =
        (this.audio.currentTime / this.audio.duration) * 100;
      // console.log(this.audio.currentTime / this.audio.duration);
    },
    //拉动滚动条时候出发 松手触发
    sliderChange(e) {
      this.audio.currentTime = (e / 100) * this.audio.duration;
    },
    //　静音/禁止静音
    muted() {
      this.audio.muted = !this.audio.muted;
    },
    //转化时长显示
    filterDuration(s) {
      if (typeof s !== 'number') {
        throw new Error('传入时长需为数字类型');
      }
      let hour = Math.floor(s / 3600);
      let min = Math.floor((s % 3600) / 60);
      let sec = Math.floor(s % 60);

      hour = hour < 10 ? `0${hour}` : hour;
      min = min < 10 ? `0${min}` : min;
      sec = sec < 10 ? `0${sec}` : sec;

      return `${min}:${sec}`;
    },
  },
};
</script>