node-Karaoke-Slideというのを作って結婚式の余興で使ってみた
なにそれ
結婚式でみんなで乾杯を生演奏で歌いたくなる状況ってよくあると思うのですが、その時に写真をスライドショーにして、そこに歌詞を表示出来たら素敵だなぁと思って作って使ってみた話です。
ムービーを作って流せばよさそうですが、生演奏なのでタイミングをあわせる必要があるのでうまくいきません。
なのでスライドショーを作ってパソコンを操作すればいいのですが一緒に歌いたい!
Keynoteなど使えばスマートフォンからリモートで操作できるのですが、以前node.jsとsocket.ioを使って同じようにリモートで操作出来るスライドを人のを真似して作ったことがあったので、今回はそれをベースに勉強がてらイチから書いてみました。
(たいしたコードではないですが...)
構成
node.js、socket.io、expressを使っています。(node.jsはnodebrewで入れました)
(しばらく使っていなかったのでexpressのインターフェイスが変わっててオッと思いましたが。。)
使い方
スマートフォンかPCで操作することを想定しているので←→かスワイプでページ送り出来ます。
作り方
歌詞は、lyricsに入れて、画像はファイル名を指定してもいいし、配列のindexをファイル名として置いても大丈夫です。
(0.JPG, 1.JPG....)
あと微妙に上下に歌詞をだし分けることもできます。
var sentences = [ { lyric: ['曲名 ', 'アーティスト'], class: "upper" }, { lyric: ['これは上に', '表示されます'], class: "upper" }, { lyric: ['これは下に', '表示されます'], class: "bottom" }, ],
とりあえず今は必要だった機能しかいれてないので、出来ることは少ないのですが。。。
CSSの調整とページ送りの工夫はしたいなぁとは思ってます。
使い方2
これでパソコンでnode app.jsしてサーバー立ち上げて、スマートフォンでそこにアクセスすれば離れた位置からスワイプで操作出来るのでみんなで一緒に歌えます!
あと、node.js使えないという状況のために、index.htmlを開くだけでも動くようにしてあります。その場合は当然リモート操作は出来ないですが。
(jQueryが入っているのはインターネットにつながらない時にも動かせるようにです)
https://github.com/koba04/node-Karaoke-Slide
友だちのためにウェブの技術を使えてよかった!