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/webpacker@5.1.1, 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

を実行

vue.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が始まって、オン、オフボタンをつける感じでいこう。

app.vue

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

こんな感じで書いたらいけました。