VuePlyrのダウンロード機能が使えるようになった
naoki7ckこんにちは。
当サイトでは、音楽プレイヤーにVuePlyrを採用することで、ページ遷移なく音源を再生させられるようにしております。
ただ先日、このVuePlyrの機能にあるダウンロードボタンがMP3でなく、当サイトのトップページ（HTML）をダウンロードするバグ？が生じていたため、試行錯誤しておりました。（↓ここで言及しました）
サイトほぼ完成、が、Vue Plyrのダウンロードボタンが機能しない...
こんにちは、管理人です。 親友・アドバイザーにも色々教えてもらいながら、音楽素材に簡単にアクセスできるWebページの作成がようやくできてきました。 これまでの音楽素…
無料・フリーBGMの音源素材サイト：Nozoria MUSIC 
結果的に、VuePlyrのサイトを確認したところ、Getter and Setterの欄で、ダウンロードボタンのURLを設定できる記載を発見...！どうやら、player.download = ＜設定したいURL＞を入れればいいらしい。
https://github.com/sampotts/plyr#getters-and-setters
ようやくWebサイトの必要機能を完成させることができました。ダウンロード機能が以前使えていたのに、１年ぐらいしてできなくなっちゃったのはVuePlyrのバージョンが変わったからなのだろうか...？
VuePlyrは最新版をCDN導入でしているので、バージョン固定の上で導入させたほうがいいかも...？
ということで、Vueでダウンロード機能付きの音楽プレイヤーを実装するにあたって、今回は以下のようなコードとしています。
※ 事前にVueなどは使えるように導入しておく必要があります。
使いまわしする人ほぼいないと思いますが。。というか、そもそも著作権フリーの音楽サイト立ち上げようという人自体、そんな多くないから、需要が全然ない気がしますが。。。
とりあえず、同じようなこと考えたりしている人の一助になれば幸いです。
<!-- ① まずは最初に、VuePlyrをCDN導入するコードを入れます -->
<script type="text/javascript" src="https://unpkg.com/vue-plyr"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-plyr/dist/vue-plyr.css" />
<!-- ② ここで、音楽プレイヤーを表示 -->
<vue-plyr ref="plyr">
<audio controls crossorigin playsinline>
</audio>
</vue-plyr>
<!-- ③ 音楽プレイヤーを再生させる文字「ここをクリック」を表示 -->
<a href="javascript:void(0)" @click="playAudio(url, title)">ここをクリック</a>
<!-- ④ VuePlyrのオブジェクトを作る。ここで好きなオプションを入れられる（いらない機能は//でコメントアウト） -->
<script>
Vue.use(VuePlyr, {
plyr: {
controls: [
'play-large', // プレイボタンを真ん中・大きめにする
//'restart', // リスタートボタンを入れる
//'rewind', // 10秒巻き戻しボタンを入れる
'play', // プレイ・ポーズボタンを入れる
//'fast-forward', // 10秒早送りボタンを入れる
'progress', // プログレスバーを入れる（どこまで再生進んでいるか、読み込んでいるか）
'current-time', // 現在の再生時間を表示する
'duration', // 音源等の総再生時間を表示する
'mute', // ミュートボタンを入れる
'volume', // ボリュームバーを入れる
//'settings', // 設定ボタン（再生速度など）を入れる
'download', // ダウンロードボタンを入れる
],
loop: {active: false} // ループ機能をオフにする
}
})
<!-- ⑤ ③でVuePlyrを表示させるための関数を作る。ここではplayAudioという関数名にしている -->
new Vue({
el: '#app',
method: {
playAudio(url,name) {
this.$refs.plyr.player.source = {
type: 'audio',
title: 'Example title',
sources: [
{
src: url, // ここでplayAudio関数の引数に指定しているURLを設定
type: 'audio/mp3',
},
],
urls: {download: url},
};
this.$refs.plyr.player.download = url // ダウンロードボタンのURLもここで設定
this.isSetSource = true
this.music_name = name
this.$refs.plyr.player.play() // 自動再生
}
}
})
</script>