Anweisungen zur Verwendung der Player-Komponente in vue-music

Dieser Artikel stellt hauptsächlich die relevanten Informationen von vue-music zur Player-Komponente vor. Er hat einen gewissen Referenzwert.

Die Beispiele in diesem Artikel werden mit Ihnen geteilt Informationen zur Player-Komponente finden Sie zu Ihrer Information:

Miniplayer:

1 . Die Player-Komponente wird auf jeder Seite geöffnet. Definieren Sie zunächst den globalen Player-Status in 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. Rufen Sie die Playlist-Daten ab, wenn Sie die Player-Seite aufrufen, und ändern Sie den Wiedergabestatus. Öffnen Sie

im Song. Die -list-Komponente löst Ereignisse aus an die übergeordnete Komponente und übergibt die Informationen und den Index des aktuellen Songs.

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

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

akzeptiert gesendete Ereignisse in der Musiklistenkomponente.

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

3. Wenn Sie mehrere Zustände festlegen, legen Sie

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

in Aktionen fest. 4. Verwenden Sie mapActions in der Musiklistenkomponente, um den geänderten Wert

import {mapActions} from 'vuex'

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

zu übermitteln blasser Rufen Sie den globalen Status von Vuex ab und weisen Sie den Status dem entsprechenden Ort zu (der Code ist der vollständige Code, bitte verstehen Sie ihn langsam gemäß der folgenden Erklärung)

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

Der Status des Öffnens des Players

import {mapGetters,mapMutations} from 'vuex';

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

Hinweis: Sie können Werte nicht direkt in der Komponente zuweisen. Ändern Sie den Status von this.fullScreen = false in vuex und müssen Sie ihn durch Mutationen und Mutationen ändern und dann die Proxy-Methode „mapMutations“ von vuex verwenden call

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

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

Legen Sie die Methode zum Klicken auf die Wiedergabetaste fest.

 <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'
},

Legen Sie die Methode zum Klicken auf die Schaltfläche zum Abspielen des vorherigen und nächsten Songs fest. Verwenden Sie mapGetters, um den Wert von currentIndex (plus eins oder minus eins) abzurufen und zu ändern, wodurch der Status von currentSong geändert und auf eine umgeschaltete Wiedergabe gewartet wird. Bestimmen Sie das Zurücksetzen des Playlist-Limits.

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;
},

Hören Sie sich das Canpaly-Ereignis des Audio-Element-Tags an, wenn das Lied geladen wird, und das Fehlerereignis, wenn im Lied ein Fehler auftritt. Dies sorgt für ein Benutzererlebnis, um zu verhindern, dass Benutzer schnell wechseln und Fehler verursachen.

Setzen Sie das Lied „Bereit“-Flag, geben Sie beim Klicken auf das nächste Lied direkt „false“ zurück

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

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

Fortschrittsbalken

Audioelement hört zum timeupdate Das Ereignis erhält den Zeitstempel des Lese-/Schreibattributs der aktuellen Wiedergabezeit. Verwenden Sie formt zum Formatieren der Zeitverarbeitung (_pad ist eine Funktion zum Auffüllen mit Nullen).

Ermitteln Sie die gesamte Audiodauer 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;
},

Erstellen Sie eine Fortschrittsbalkenkomponente, um den Pencent-Fortschrittsparameter zu erhalten. Legen Sie die Breite des Fortschrittsbalkens und die Position des Balls fest. Die Player-Komponente legt den berechneten Eigenschaftsprozentsatz fest.

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

Fortschrittsbalkenkomponente

<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)`
 }
 }
}

legt das Ziehen

auf den Fortschritt fest kleine Leiste-Schaltfläche Fügen Sie die Ereignisüberwachungsmethoden touchstart, touchmove und touchend zu progressBtn hinzu, fügen Sie verhindern zum Ereignis hinzu, um das standardmäßige Browserverhalten des Ziehens zu verhindern, und erhalten Sie Ziehinformationen für die Berechnung

Erstellen Sie ein Touch-Objekt auf der Instanz, um es zu verwalten Die Beziehung zwischen verschiedenen Rückrufen. Kommunikation teilt Statusinformationen. Setzen Sie in der Ereignismethode „touchstart“ zunächst „this.touch.initiated“ auf „true“, um anzuzeigen, dass das Ziehen begonnen hat. Zeichnen Sie die Startposition des Klicks e.touches[0].pageX auf und speichern Sie sie im Touch-Objekt, um die aktuelle Fortschrittsbreite aufzuzeichnen.

Bestimmen Sie in touchmove zunächst, ob die Touchstart-Methode zuerst eingegeben wurde, und berechnen Sie die verschobene Position abzüglich der Versatzlänge der Klickstartposition. let deltax = e.touches[0].pageX - this.touch.startX

kann die vorhandene Länge des Fortschrittsbalkens plus die Versatzlänge festlegen. Die maximale Breite darf die Breite des übergeordneten Fortschrittsbalkens nicht überschreiten.

Rufen Sie die Methode this._offset(offsetWidth) auf, um die Breite des Fortschrittsbalkens festzulegen.

Setzen Sie this.touch.initiated im Touchend auf false Ereignismethode, um das Ende des Ziehens anzuzeigen und das Ereignis an die Player-Komponente zu senden. Der Parameter ist pencent. Fügen Sie ein Klickereignis in der Fortschrittsleiste hinzu und rufen Sie this._offset auf (e.offsetX) und senden Sie das Ereignis

 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)
 }
},

Dieser Artikel wurde im „Vue.js Front-End Component Learning Tutorial“ organisiert. Jeder ist herzlich willkommen, ihn zu lernen und zu lesen.

Für Tutorials zu vue.js-Komponenten klicken Sie bitte auf das spezielle Tutorial zum Lernen von vue.js-Komponenten.

Weitere Vue-Lerntutorials finden Sie im speziellen Thema „Vue-Praxis-Tutorial“.

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

So integrieren Sie das Karussellbild in mint-ui in vue.js

So implementieren Sie es in Jstree Deaktivierte untergeordnete Knoten werden auch ausgewählt, wenn der übergeordnete Knoten ausgewählt wird

Über die Verwendung von Filtern in Vue

Adaptive in Javascript-Behandlungsmethode

Das obige ist der detaillierte Inhalt vonAnweisungen zur Verwendung der Player-Komponente in vue-music. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!