Vueを使用してオーディオプレーヤーを実装する方法

Vue は、効率的なコンポーネントベースの開発モデルと応答性の高いデータ バインディング機能を備えた人気の JavaScript フレームワークで、対話性の高い Web アプリケーションの開発に適しています。実際の開発では UI コンポーネントのカスタマイズや開発が一般的ですが、この記事では Vue を使用してオーディオ プレーヤーを実装する方法に焦点を当てます。

まず、Vue.js をインストールする必要があります。 Vue 公式 Web サイトで Vue.js ファイルをダウンロードするか、npm またはyarn を使用してインストールできます。

npm install vue

インストールが完了したら、オーディオ プレーヤーの構築を開始できます。

HTML パート

HTML パートでは、最初にオーディオ タグ <audio> とすべてのオーディオ プレーヤー コントロール コンポーネントを宣言する必要があります。いくつかのボタンを使用して、プレーヤーのさまざまな状態をそれぞれ制御していることがわかります。これらのボタンは vue コンポーネントにバインドされます。 div を使用して音楽リストを表示することもできます。これも vue コンポーネントによってバインドされます。また、音楽を動的に追加および削除できるように、プレイリストをバインドしました。

<div id="app">
    <div class="audio-player">
        <audio src="" id="audio" ref="audio"></audio>
        <!-- 播放按钮 -->
        <button class="button" v-on:click="playAudio"><i class="fa fa-play"></i></button>
        <!-- 暂停按钮 -->
        <button class="button" v-on:click="pauseAudio"><i class="fa fa-pause"></i></button>
        <!-- 上一个按钮 -->
        <button class="button" v-on:click="prevAudio"><i class="fa fa-chevron-left"></i></button>
        <!-- 下一个按钮 -->
        <button class="button" v-on:click="nextAudio"><i class="fa fa-chevron-right"></i></button>
        <div class="playlist">
            <div class="list-item" v-for="(audio,index) in audioList" v-bind:key="index" v-on:click="changeAudio(index)">
                {{audio.name}}
            </div>
        </div>
    </div>
</div>

Vue コンポーネントの定義

次に、Vue コンポーネントを定義し、先ほど定義したメソッドを HTML で実装する必要があります:

var vm = new Vue({
    el: '#app',
    data: {
        audioList: [], // 音乐列表
        currentAudio: { // 当前音乐信息
            src: '',
            name: '',
            artist: '',
        },
        currentIndex: 0, // 当前播放音乐在列表中的索引
        playStatus: false, // 播放状态
    },
    methods: {
        // 播放音乐
        playAudio: function() {
            this.playStatus = true
            this.$refs.audio.play()
        },
        // 暂停音乐
        pauseAudio: function() {
            this.playStatus = false
            this.$refs.audio.pause()
        },
        // 播放下一首
        nextAudio: function() {
            this.currentIndex++
            if (this.currentIndex > this.audioList.length - 1) {
                this.currentIndex = 0
            }
            this.currentAudio = this.audioList[this.currentIndex]
            this.$refs.audio.src = this.currentAudio.src
            this.playAudio()
        },
        // 播放上一首
        prevAudio: function() {
            this.currentIndex--
            if (this.currentIndex < 0) {
                this.currentIndex = this.audioList.length - 1
            }
            this.currentAudio = this.audioList[this.currentIndex]
            this.$refs.audio.src = this.currentAudio.src
            this.playAudio()
        },
        // 切换音乐
        changeAudio: function(index) {
            this.currentIndex = index
            this.currentAudio = this.audioList[this.currentIndex]
            this.$refs.audio.src = this.currentAudio.src
            this.playAudio()
        }
    }
})

Vue コンポーネントのコアは次のとおりです。 data および methods 属性。 data 属性には、音楽情報とプレイリスト情報を含む一連の変数が含まれており、ページ ビューとデータの同期を確保するために随時監視および更新されます。 methods 属性には、必要に応じて音楽プレーヤーを更新するための一連のメソッドが含まれています。

前に説明したように、音楽情報の配列 audioList と、現在再生中の音楽の完全な情報を含む別のオブジェクト currentAudio を使用します。また、現在再生中の曲を追跡するために currentIndex 変数を定義し、再生ステータスを切り替えるために playStatus を使用します。

私たちのメソッドには、音楽の再生 (または一時停止) を制御する playAudio および pauseAudio、nextAudio および prevAudio が含まれます。プレイリスト内の次または前の音楽にそれぞれ切り替えるには、changeAudio を使用して、選択した音楽に切り替えます。

最後に、$refs メソッドを使用して、前に HTML セクションで宣言したオーディオ タグ audio を参照し、その play メソッドとpause メソッドを呼び出せるようにします。

音楽リストのバインド

これで、プレーヤーを音楽リストにバインドできるようになりました。適切な音楽ファイルをオンラインで選択し、音楽リストに追加できます。コードは以下のように表示されます。

vm.audioList = [
    {
        name: 'A Chill Sound',
        artist: 'Faster san',
        src: 'music/1.a-chill-sound.mp3'
    },
    {
        name: 'Calm Breeze',
        artist: 'Suraj Bista',
        src: 'music/2.calm-breeze.mp3',
    },
    {
        name: 'Happiness',
        artist: 'Erick McNerney',
        src: 'music/3.happiness.mp3'
    }
];
vm.currentAudio = vm.audioList[vm.currentIndex];
vm.$refs.audio.src = vm.currentAudio.src;

これで音楽を楽しめます。この記事では、Vue.js を使用してシンプルな音楽プレーヤーを作成する方法を示し、そのデータ バインディングとメソッド呼び出し機能を使用して動的アプリケーションを作成する方法を説明します。機能を実装するときは、エンドツーエンドの機能のセキュリティと使いやすさを念頭に置き、コードをきちんと明確に整理することが重要です。

以上がVueを使用してオーディオプレーヤーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。