Instructions d'utilisation du composant Player dans vue-music

Cet article présente principalement en détail les informations pertinentes de vue-music sur le composant Player. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Les exemples de cet article sont partagés avec vous. à propos du composant Player est fourni pour votre référence. Le contenu spécifique est le suivant

Mini lecteur :

1. . Le composant lecteur sera ouvert sur chaque page. Définissez d'abord l'état global du lecteur dans vuex state.js

import {playMode} from 'common/js/config.js';

const state = {
 singer:{}, 
 playing:false, //是否播放
 fullScreen:false, //是否全屏
 playList:[], //播放列表
 sequenceList:[], // 非顺序播放列表
 mode:playMode.sequence, // 播放模式（顺序0，循环1，随机2）
 currentIndex:-1, //当前播放索引
}
export default state 


---------------------------------------------
// config.js

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

2. Obtenez les données de la playlist en entrant dans la page du lecteur, modifiez l'état de lecture et ouvrez

dans la liste de la liste de musique Distribuez les événements au composant parent dans le composant song-list, transmettez les informations et l'index de la chanson actuelle

<li @click="selectItem(song,index)" v-for="(song,index) in songs" class="item">

------------------------------
selectItem(item,index){
 this.$emit(&#39;select&#39;,item,index)
},

et acceptez l'événement distribué dans le composant music-list.

<song-list :rank="rank" :songs="songs" @select="selectItem"></song-list>

3. Si vous validez plusieurs états, définissez-les dans des actions

import {playMode} from 'common/js/config.js'

export const selectPlay = function({commit,state},{list,index}){
 commit(types.SET_SEQUENCE_LIST, list)
 commit(types.SET_PLAYLIST, list)
 commit(types.SET_CURRENT_INDEX, index)
 commit(types.SET_FULL_SCREEN, true)
 commit(types.SET_PLAYING_STATE, true)
}

4 Utilisez mapActions dans le composant music-list pour soumettre la valeur modifiée

import {mapActions} from 'vuex'

methods:{
 selectItem(item,index){
  this.selectPlay({
  list:this.songs,
  index
  })
 },
 ...mapActions([
  'selectPlay'
 ])
 },

.

5. Obtenez le statut global de Vuex dans Palyer et attribuez le statut à l'emplacement correspondant (le code est le code complet, veuillez le comprendre lentement selon l'explication plus tard)

<p class="player" v-show="playList.length>0">　　　　// 如果有列表数据则显示
  <p class="normal-player" v-show="fullScreen">　　//如果全屏
   <p class="background">
   <img :src="currentSong.image" alt="" width="100%" height="100%">　　　　//模糊背景图
   </p>
   <p class="top">
    <p class="back" @click="back">
    <i class="icon-back"></i>
    </p>
    <h1 class="title" v-html="currentSong.name"></h1>　　　　//当前歌曲名称
    <h2 class="subtitle" v-html="currentSong.singer"></h2>　　//当前歌手名
   </p>
   <p class="middle">
    <p class="middle-l">
    <p class="cd-wrapper">
     <p class="cd" :class="cdCls">
     <img :src="currentSong.image" alt="" class="image">　　　　//封面图
     </p>
    </p>
    </p>
   </p>
   <p class="bottom">
   <p class="progress-wrapper">
   <span class="time time-l">{{ format(currentTime) }}</span>
   <p class="progress-bar-wrapper">
    <progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar>
   </p>
   <span class="time time-r">{{ format(currentSong.duration) }}</span>
   </p>
     <p class="operators">
    <p class="icon i-left">
     <i :class="iconMode" @click="changeMode"></i>
    </p>
     <p class="icon i-left" :class="disableCls">
      <i @click="prev" class="icon-prev"></i>
      </p>
      <p class="icon i-center" :class="disableCls">
      <i :class="playIcon" @click="togglePlaying"></i>
      </p>
      <p class="icon i-right" :class="disableCls">
      <i @click="next" class="icon-next"></i>
      </p>
      <p class="icon i-right">
      <i class="icon icon-not-favorite"></i>
      </p>
    </p>
    </p>
   </p>
   </transition>
   <transition name="mini">
    <p class="mini-player" v-show="!fullScreen" @click="open">
     <p class="icon">
      <img :src="currentSong.image" alt="" width="40" height="40" :class="cdCls">
     </p>
     <p class="text">
      <h2 class="name" v-html="currentSong.name"></h2>
      <p class="desc" v-html="currentSong.singer"></p>
     </p>
     <p class="control">
      <i :class="miniIcon" @click.stop="togglePlaying"></i>
     </p>
     <p class="control">
      <i class="icon-playlist"></i>
     </p>
    </p>
   </transition>
   <audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio>
 </p>

Ouvrez le statut du joueur

import {mapGetters,mapMutations} from 'vuex';

...mapGetters([
 'fullScreen',
 'playList',
 'currentSong',
 'playing',
 'currentIndex',
])

Remarque : les valeurs ne peuvent pas être attribuées directement dans le composant. L'état this.fullScreen = false dans la vuex modifiée doit être modifié via des mutations. Ensuite, définissez les types de mutations. utilisez la méthode proxy mapMutations de vuex pour appeler

[types.SET_FULL_SCREEN](state, flag) {
 state.fullScreen = flag
 },

import {mapGetters,mapMutations} from 'vuex';
methods:{
 ...mapMutations({
 setFullScreen:"SET_FULL_SCREEN", 
 }),
 back(){
 this.setFullScreen(false)
 },
}

pour définir la méthode du bouton de lecture

 <i :class="playIcon" @click="togglePlaying"></i>

togglePlaying(){
 this.setPlayingState(!this.playing); //改变全局变量playing 的属性
},

// 然后watch 监听playing 操作实际的audio 标签的播放暂停
watch:{
  playing(newPlaying){
   let audio = this.$refs.audio;
   this.$nextTick(() => {
    newPlaying ? audio.play():audio.pause();
   })
  }
 },

// 用计算属性改变相应的播放暂停图标
playIcon(){
 return this.playing? 'icon-pause':'icon-play'
},

Définissez les méthodes du bouton de lecture de la chanson précédente et suivante. Utilisez mapGetters pour obtenir la valeur de currentIndex (plus un ou moins un) et modifiez-la, modifiant ainsi l'état de currentSong et écoutant le changement de lecture. Déterminez la réinitialisation de la limite de playlist.

prev(){
　　　　if(!this.songReady){
　　　　　　return;
　　　　}

 let index = this.currentIndex - 1;
 if(index === -1){　　　　//判断播放列表界限重置
  index = this.playList.length-1;
 }
 this.setCurrentIndex(index);
 if(!this.playing){　　//判断是否播放改变播放暂停的icon
  this.togglePlaying();
 }
 this.songReady = false;
},
next(){
 if(!this.songReady){
　　　　return;
　　 }
 let index = this.currentIndex + 1;
 if(index === this.playList.length){　　　　//判断播放列表界限重置
  index = 0;
 }
 this.setCurrentIndex(index);
 if(!this.playing){
  this.togglePlaying();
 }
 this.songReady = false;
},

Écoutez l'événement canpaly de la balise d'élément audio, lorsque la chanson est chargée, et l'événement d'erreur, lorsqu'une erreur se produit dans la chanson, offrez une expérience utilisateur pour empêcher les utilisateurs de changer rapidement et de provoquer erreurs.

Définissez le drapeau songReady. Si la chanson n'est pas prête, renvoyez directement false en cliquant sur la chanson suivante

data(){
 return {
  songReady:false,
 }
},

ready(){
 this.songReady = true;
},
error(){
 this.songReady = true;
},

Barre de progression

audio. element Écoutez l'événement timeupdate pour obtenir l'horodatage de l'attribut lisible et inscriptible de l'heure de lecture actuelle. Utilisez formt pour formater le traitement du temps (_pad est une fonction de remplissage nul)

Obtenez la durée totale de l'audio currentSong.duration

<p class="progress-wrapper">
 <span class="time time-l">{{ format(currentTime) }}</span>
 <p class="progress-bar-wrapper">
 <progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar>
 </p>
 <span class="time time-r">{{ format(currentSong.duration) }}</span>
</p>

<audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio>

updateTime(e){
 this.currentTime = e.target.currentTime; // 获取当前播放时间段
},

format(interval){
 interval = interval | 0;
 const minute = interval/60 | 0;
 const second = this._pad(interval % 60);
 return `${minute}:${second}`;  
},

_pad(num,n=2){
 let len = num.toString().length;
 while(len<n){
 num = &#39;0&#39; + num;
 len ++;
 }
 return num;
},

Créez un composant de barre de progression pour recevoir le paramètre de progression en pourcentage, définit la largeur de la barre de progression et la position de la balle. Le composant lecteur définit le pourcentage de propriété calculé

percent(){
 return this.currentTime / this.currentSong.duration 　// 当前时长除以总时长
},

composant de la barre de progression

<p class="progress-bar" ref="progressBar" @click="progressClick">
 <p class="bar-inner">
  <p class="progress" ref="progress"></p>
  <p class="progress-btn-wrapper" ref="progressBtn"
   @touchstart.prevent="progressTouchStart"
   @touchmove.prevent="progressTouchMove"
   @touchend="progressTouchEnd"  
  >
  <p class="progress-btn"></p>
  </p>
 </p>
 </p>

const progressBtnWidth = 16 //小球宽度

props:{
 percent:{
 type:Number,
 default:0
 }
},


watch:{
 percent(newPercent){
 if(newPercent>=0 && !this.touch.initated){　　　　
  const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth;
  const offsetWidth = newPercent * barWidth;
  this.$refs.progress.style.width = `${offsetWidth}px`;
  this.$refs.progressBtn.style.transform=`translate3d(${offsetWidth}px,0,0)`
 }
 }
}

Définir le glissement

Ajoutez des méthodes d'écoute d'événements touchstart, touchmove et touchend sur le petit bouton de la barre de progression progressBtn, ajoutez Prevent à l'événement pour empêcher le comportement par défaut du navigateur de glisser et obtenez les informations de glisser pour le calcul

Créer une touche objet sur l'instance Maintenir les informations d'état de partage de communication entre différents rappels. Dans la méthode événementielle touchstart, définissez d'abord this.touch.initiated sur true, indiquant que le glissement a commencé. Enregistrez la position de clic de départ e.touches[0].pageX et enregistrez-la sur l'objet tactile pour enregistrer la largeur de progression actuelle.

Dans touchmove, déterminez d'abord si la méthode touchstart a été saisie en premier et calculez la position déplacée moins la longueur de décalage de la position de départ du clic. let deltax = e.touches[0].pageX - this.touch.startX

peut définir la longueur existante de la barre de progression ainsi que la longueur de décalage. La largeur maximale ne peut pas dépasser la largeur de la barre de progression parent

Appelez la méthode this._offset(offsetWidth) pour définir la largeur de la barre de progression

Définissez this.touch.initiated sur false dans le touchend méthode d'événement pour indiquer la fin du glissement et envoyer l'événement au composant lecteur. Définissez la valeur currentTime de l'audio sur la valeur correcte. Le paramètre est pencent

. Ajoutez un événement de clic dans la barre de progression, appelez this._offset. (e.offsetX) et envoyer l'événement

 created(){
 this.touch = {};
 },

methods:{
 progressTouchStart(e){
 this.touch.initiated = true;
 this.touch.startX = e.touches[0].pageX;
 this.touch.left = this.$refs.progress.clientWidth;
 },
 progressTouchMove(e){
 if(!this.touch.initiated){
  return;
 }
 let deltaX = e.touches[0].pageX - this.touch.startX;
 let offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth,Math.max(0,this.touch.left + deltaX));
 this._offset(offsetWidth);
 },
 progressTouchEnd(e){
 this.touch.initiated = false;
 this._triggerPercent();
 },
 progressClick(e){
 const rect = this.$refs.progressBar.getBoundingClientRect();
 const offsetWidth = e.pageX - rect.left;
 this._offset(offsetWidth);
 // this._offset(e.offsetX);
 this._triggerPercent();
 },
 _offset(offsetWidth){
 this.$refs.progress.style.width = `${offsetWidth}px`;
 this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px,0,0)`;
 },
 _triggerPercent(){
 const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth;
 const percent = this.$refs.progress.clientWidth / barWidth;
 this.$emit("percentChange",percent)
 }
},

Cet article a été organisé dans le "Tutoriel d'apprentissage des composants frontaux Vue.js". Tout le monde est invité à apprendre et à lire.

Pour les didacticiels sur les composants vue.js, veuillez cliquer sur le didacticiel spécial d'apprentissage des composants vue.js pour apprendre.

Pour plus de tutoriels d'apprentissage Vue, veuillez lire le sujet spécial "Tutoriel pratique Vue"

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.

Articles associés :

Comment intégrer l'image du carrousel dans mint-ui dans vue.js

Comment l'implémenter dans Jstree Les nœuds enfants désactivés seront également sélectionnés lorsque le nœud parent est sélectionné

À propos de l'utilisation des filtres dans Vue

Adaptatif dans la méthode de traitement Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!