Vue.jsを用いてBGMを流す方法(vue-youtube)
今コーヒーに関するアプリを作ってるので、アプリに自動でcafe musicが流れたら面白いなぁと思ったので、
vue-jsでそれらの機能を実装してみたい。
これら玉稿を参考にしていきたいと思います。
必要であればyoutube APIをvueで叩いていくのもなくはない。
追記[.mp3といった音源ファイルが必要らしい。]
いざ実装。
と思ったら、
Failed to compile.
./node_modules/vue-aplayer/dist/vue-aplayer.min.js
Module not found: Error: Can't resolve 'hls.js' in '/coffee_passport/node_modules/vue-aplayer/dist'
ブラウザにこんなエラー
soichirohara@SoichironoMacBook-Pro coffee_passport % npm i vue-aplayer
changed 3 packages, and audited 1162 packages in 3s
97 packages are looking for funding
run `npm fund` for details
6 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
soichirohara@SoichironoMacBook-Pro coffee_passport % npm audit
# npm audit report
glob-parent <5.1.2
Severity: moderate
Regular expression denial of service - https://npmjs.com/advisories/1751
fix available via `npm audit fix --force`
Will install @rails/[email protected], which is a breaking change
node_modules/glob-parent
chokidar 1.0.0-rc1 - 2.1.8
Depends on vulnerable versions of glob-parent
node_modules/chokidar
watchpack-chokidar2 *
Depends on vulnerable versions of chokidar
node_modules/watchpack-chokidar2
watchpack 1.7.2 - 1.7.5
Depends on vulnerable versions of watchpack-chokidar2
node_modules/watchpack
webpack 4.44.0 - 4.46.0
Depends on vulnerable versions of watchpack
node_modules/webpack
@rails/webpacker 5.2.0 - 5.4.2
Depends on vulnerable versions of webpack
node_modules/@rails/webpacker
6 moderate severity vulnerabilities
To address all issues (including breaking changes), run:
npm audit fix --force
https://qiita.com/hibikikudo/items/0af352acac85fce28ec2
https://fantastech.net/npm-audit-fix-not-working
調べてみたら脆弱性の問題なので、今回のエラーとは関係ない？
パッケージの依存関係とかだるいのでとりあえず後回し。
最悪これでやればいい話
https://github.com/SevenOutman/vue-aplayer/issues/61
がでてきたので、
npm install --save hls.js
を実行
module.exports = {
test: /\.vue(\.erb)?$/,
use: [{
loader: 'vue-loader',
externals: 'hls.js'
}]
}
にこういう感じで追加して、docker-compose upをやり直し。
Cannot read property 'version' of undefined
とエラーがでた。
npm install eslint
を実行すればいいらしい。
でもエラー変わらず。
npm install --save-dev eslint@5
もうめんどいので一旦ブランチ切ります。
色々なライブラリを入れると結構めんどくさい。。。
なんのライブラリを入れるべきかみたいな選定がたぶんできてない。
それもなんかしらでいつか学ばなくちゃいけねぇ
改めて
https://aqua-engineer.com/post-884/
https://developer.mozilla.org/ja/docs/Web/API/HTMLAudioElement
https://techacademy.jp/magazine/21240
audioオブジェクトとなるもんがjsにはあるらしい。
srcプロパティににそもままyoutubeの音源をぶちこめばいいのか
それで再生されればいいのだが、そうじゃなかったらyoutube APIとかを利用する必要ありそう。
ひとまずaudioオブジェクトを活用していきたい。
ほぼほぼこの玉稿のパクリ。
Uncaught (in promise) DOMException: The element has no supported sources.
とこんなエラーが。。。
なんかブラウザの問題らしい。
まああと、mp3を導入してないから説もある。
youtube 使って実装
npm install vue-youtube
があるらしい。
懲りずに実行。
https://qiita.com/norton0209/items/ba3e46342a0dbed065e2
こんな感じで書いたらできた。
ただ、普通にやってもつまらないので、
アプリ開いた瞬間にbgmが始まって、オン、オフボタンをつける感じでいこう。
<template>
<div class="playing-button">
<button class="playing-button-on" @click="pauseVideo" v-if="playing">BGMをOFF</button>
<button class="playing-button-off" @click="playVideo" v-else>BGMをON</button>
</div>
<youtube :video-id="videoId" ref="youtube" @playerVars="playerVars" hidden/>
</template>
<script>
data: function(){
return {
videoId: "QN1uygzp56s",
playing: false,
playerVars: {
autoplay: 1
}
}
methods: {
mounted: function(){
this.playVideo();
},
playVideo(){ // 再生処理
this.$refs.youtube.player.playVideo()
this.playing = true
},
pauseVideo(){ // 停止処理
this.$refs.youtube.player.pauseVideo()
this.playing = false
},
}
</script>
こんな感じで書いたらいけました。
Author And Source
この問題について(Vue.jsを用いてBGMを流す方法(vue-youtube)), 我々は、より多くの情報をここで見つけました https://qiita.com/divclass123/items/28b25d19de5c227c33be著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .