码迷,mamicode.com
首页 > 其他好文 > 详细

vue-music 关于Player (播放器组件)--播放模式

时间:2018-06-13 22:22:42      阅读:687      评论:0      收藏:0      [点我收藏+]

标签:play   ret   span   port   最大   ctp   切换   enc   export   

播放器播放模式有三种,顺序播放,单曲循环,随机播放,定义在vuex 中的字段为 mode。点击切换播放模式的图标。切换模式判断是否为随机播放,如果是随机播放模式,则取得sequenceList 列表数组 。

首先分清楚 sequenceList 是歌单顺序列表,显示在界面上的,playlist 是根据播放模式改变的,顺序播放时playlist  等于sequenceList ,随机播放时playlist  为随机数组列表

利用(shuffle)工具函数。将其随机打乱重组赋值给vuex中的playlist。当改变playlist的时候需要重置 currentIndex ,因为playlist改变为随机播放模式时。currentindex的索引指向的歌曲就不对了。 所以用 resetCurrentIndex 函数判断当前歌曲的id 是否和列表中播放的歌曲的id相同,相同则重新赋值该索引,保证在正在播放当前歌曲的时候切换模式,当前歌曲不被改变

// util.js// 返回最小与最大值之间的随机数,包含最大最小值
function getRandomInt(min,max){
    return Math.floor(Math.random() * (max - min+1) + min)
}

//将数组的副本循环随机打乱重组一个新数组返回
export function shuffle(arr){
    let _arr = arr.slice();
    for(let i=0;i<_arr.length;i++){
        let j = getRandomInt(0,i);
        let t = _arr[i];
        _arr[i] = _arr[j];
        _arr[j] = t;
    }
    return _arr;
}

vuex

export const playMode = {
    sequence:0,
    loop:1,
    random:2
}

const state = {
    mode:playMode.sequence,
}
export default state

player.vue

<i :class="iconMode" @click="changeMode"></i>

iconMode(){
  return this.mode === playMode.sequence ? ‘icon-sequence‘ : this.mode === playMode.loop ? ‘icon-loop‘ : ‘icon-random‘    //设置播放模式图标
},

changeMode(){
  let mode = (this.mode + 1)%3;    //点击循环切换
  this.setPlayMode(mode);    
  let list = null;
  if(mode === playMode.random){
    list = shuffle(this.sequenceList)
  }else{
    list = this.sequenceList;
  }
  this.resetCurrentIndex(list);    //由于playlist 变成随机模式,currentsong是根据currentindex 和playlist 改变的,需要保持currentindex 在随机播放列表的正确位置,以确保当前播放歌曲不变
  this.setPlayList(list); 
},
resetCurrentIndex(list){    
  let index = list.findIndex((item) => {
    return item.id === this.currentSong.id
  })
  this.setCurrentIndex(index);
},

单曲循环模式需要监听audio 元素ended 事件,如果end 时模式为loop模式,则设置当前歌曲的currentTime为0,并重新播放,否则按照播放列表进行下一首播放(播放列表此时有可能是顺序列表或者已改变为随机列表)

在music-list 组件中,点击随机播放按钮 提交actions 的randomPlay,设置playlist 为随机播放列表,在选择播放的时候判断当前播放模式

function findIndex(list,song){
  return list.findIndex((item) => {
    return item.id === song.id;
  })
}

export const selectPlay = function({commit,state},{list,index}){
    commit(types.SET_SEQUENCE_LIST, list)
  if (state.mode === playMode.random) {
    let randomList = shuffle(list)
    commit(types.SET_PLAYLIST, randomList)  
    index = findIndex(randomList, list[index])
  } else {
    commit(types.SET_PLAYLIST, list)
  }
  commit(types.SET_CURRENT_INDEX, index)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}
export const randomPlay = function({commit},{list}){
  commit(types.SET_PLAY_MODE,playMode.random);
  commit(types.SET_SEQUENCE_LIST, list);
  let randomList = shuffle(list)
  commit(types.SET_PLAYLIST, randomList)
  commit(types.SET_CURRENT_INDEX, 0)
  commit(types.SET_FULL_SCREEN, true)
  commit(types.SET_PLAYING_STATE, true)
}
<div class="play" ref="playBtn" @click="random">

random(){
  this.randomPlay({
    list:this.songs
  })
},
...mapActions([
  ‘selectPlay‘,
  ‘randomPlay‘
])

 

vue-music 关于Player (播放器组件)--播放模式

标签:play   ret   span   port   最大   ctp   切换   enc   export   

原文地址:https://www.cnblogs.com/catbrother/p/9180369.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!