カラオケハックのハッカソン参加（メモ）

ハッカソン参加の自分用メモ

ニューノーマル時代のカラオケをハックせよ Sponsored by JOYSOUND #protoout
ニューノーマル時代だからこその「新しいカラオケ」の楽しみ方を生み出すハッカソンです。カラオケそのものの楽しみ方から、友達への誘い方、終了後の余韻まで、カラオケにまつわるあらゆるシーンをハックし、「ニューノーマル時代のカラオケ」のあり方を提案しましょう！

作る概要決め

・カラオケのガヤ（合いの手）を入れるボット？
・LINEBOTで入力 → 中継サーバ → Webページで表示（ガヤ再生）
　※LINEBOTだとコネクションを常に張るのは難しいとのことなので、中継サーバを利用。
・音楽は決め打ち。 → 大塚愛／さくらんぼ。

※アドバイス
データ受け渡し部分を先に決めるのが良いと思うが、時間的に厳しいハッカソンなので、連携ができなくても問題ない。LINEBOT、Webページはユーザが使う部分なので、使い勝手を意識したら良い。

Webページ作成
youtube、Webページ、MP4スクリプト、オーディオタグ　で調べると良いかも。

役立ちそうなリンク

●Webアプリの作り方（思い出し用）
　・Codepenサンプル１（ToDo・CSSなし）
　・Codepenサンプル２（ToDo・Bootstrap）
　・Codepenサンプル３（axios・COVID-19App）

●音の再生はどうやるの？受け取った音声ファイルを自動再生？
　・vue.jsで複数のvideoタグを扱う - Qiita
　・ChromeとSafariでaudioタグを自動再生するための対策
　・Vue on CodePen - Vue Patterns & Templates （player検索）

●音楽再生のよさそうなAPI（howler.js）
　・howler.js - Doc
　・[HTML5] 音声ファイルをJSで再生/停止する – howler.js編

●音楽再生のよさそうなAPI（Youtube Player API）
　・自宅で夏の散歩ができる「夏休み君」をYoutube Player APIで作ってみた - Qiita

●音源サンプル
　・フリー効果音素材・無料効果音 - 無料効果音で遊ぼう！
　　→ 「DL」のリンクをコピーすればmp3のURL取得できる。

●データの受け取り
　・PubNubアカウント作成方法
　・PubNub
　　→ 中継サーバの構築も不要で、リアルタイムに受け取れる。（恐らく簡単かも？）
　　※下のコードは単純に受けたメッセージを表示するサンプル

HTML

<div>
  <h1>GAYA Play</h1>
  <h1 id="gaya"></h1>
</div>

JS

var pubnub = new PubNub({
  subscribeKey: "myPublishKey",
  publishKey: "mySubscribeKey",
})

pubnub.addListener({
    status: function(statusEvent) {
      if (statusEvent.category === "PNConnectedCategory") {
        console.log('connect')
      }
    },
    message: function(message) {
      console.log(message)
      gaya.innerHTML = message.message
    },
})

pubnub.subscribe({
  channels: ['gaya'],
})