vue-music で Player コンポーネントを使用する手順

この記事では、主に Player コンポーネントに関する vue-music の関連情報を詳しく紹介します。興味のある方は参考にしてください。この記事の具体的な内容は、あなたのものです。具体的な内容は以下の通りです

ミニプレーヤー:

1. 各ページでプレーヤーコンポーネントが開きます。 まず、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. プレーヤーページに入るときにプレイリストデータを取得し、再生状態を変更します。 音楽リストリストで開きます

ソングリストコンポーネントの親にイベントをディスパッチしますコンポーネント、現在の曲の情報とインデックスを渡します

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

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

music-list コンポーネントでディスパッチ イベントを受信します。

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

3. 複数の状態をコミットする場合は、それらをアクションに設定します

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. 変更された値を music-list コンポーネントに送信します

import {mapActions} from 'vuex'

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

5. vuex グローバル状態を淡い状態で取得し、状態を割り当てます。対応する場所 (コード 完全なコードについては、以下の説明を参照してゆっくり理解してください)

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

プレーヤーのステータスを開きます

import {mapGetters,mapMutations} from 'vuex';

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

注: vuex でステータスを変更するためにコンポーネントに直接値を割り当てることはできませんThis.fullScreen = false は、ミューテーション タイプとミューテーションを定義してから、vuex の mapMutations プロキシ メソッドを使用して

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

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

を呼び出し、クリックを設定するクリック再生ボタン メソッド

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

を設定する必要があります。 -前の曲と次の曲を再生するボタンのメソッド。 mapGetters を使用して currentIndex の値 (プラス 1 またはマイナス 1) を取得し、変更します。これにより、currentSong の状態が変更され、再生の切り替えがリッスンされます。プレイリスト制限のリセットを決定します。

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

曲がロードされるときは audio 要素タグの canpaly イベントを、曲でエラーが発生したときは error イベントを聞くことで、ユーザーがすぐに切り替えてエラーを引き起こすことを防ぐユーザー エクスペリエンスを提供します。

曲の準備ができていない場合は、次の曲をクリックしたときに直接 false を返します

プログレスバー

audio 要素は、現在の曲の読み取り/書き込み属性のタイムスタンプを取得するために timeupdate イベントをリッスンします。再生時間。書式設定時間の処理には formt を使用します (_pad はゼロ パディング関数です)合計オーディオ期間を取得します currentSong.duration

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

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

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

プログレスバーコンポーネント

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

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

ドラッグを設定します

プログレスバーの小さなボタンprogressBtnにtouchstart、touchmove、touchendイベントリスニングメソッドを追加し、イベントにPreventを追加しますデフォルトの参照アクチュエータ動作によるドラッグを防止し、計算用のドラッグ情報を取得します インスタンス上にタッチ オブジェクトを作成して、異なるコールバック間の通信と共有ステータス情報を維持します。 touchstart イベント メソッドで、まず this.touch.initiated を true に設定し、ドラッグが開始されたことを示します。開始クリック位置 e.touches[0].pageX を記録し、それをタッチ オブジェクトに保存して、現在の進行幅を記録します。

touchmoveでは、まずtouchstartメソッドが先に入力されたかどうかを判定し、移動位置からクリック開始位置のオフセット長を差し引いた値を計算します。 let deltax = e.touches[0].pageX - this.touch.startX

は、プログレスバーの既存の長さにオフセットの長さを加えたものを設定できます。最大幅は親プログレスバーの幅を超えることはできません

this._offset(offsetWidth) メソッドを呼び出してプログレスバーの幅を設定します

touchend イベント メソッドで this.touch.initiated を false に設定して、ドラッグの終了を示しますオーディオの currentTime 値を正しい値に設定し、パラメーターはペンセントです

プログレスバーにクリック イベントを追加し、this._offset(e.offsetX) を呼び出し、イベントをディスパッチします

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

この記事は「Vue.js フロントエンド コンポーネントの学習」チュートリアルにまとめられており、どなたでも学習して読むことができます。

vue.js コンポーネントのチュートリアルについては、特別な vue.js コンポーネント学習チュートリアルをクリックして学習してください。

Vue 学習チュートリアルの詳細については、特別なトピック「Vue 実践チュートリアル」を参照してください。

上記は私があなたのためにまとめたものです。

関連記事:

vue.jsのmint-uiにカルーセルチャートを統合する方法

親ノードが選択されたときに無効化された子ノードも選択されるようにJstreeに実装する方法

Vueでのフィルターの使い方について

JavaScriptでの適応処理方法

以上がvue-music で Player コンポーネントを使用する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。