Kyu3’s Blog

広告鳥（@adbirdbrain）さんのツイートで知ったのですが、HTML 5プレーヤーを使って、ローカルの音楽ファイル（や、あと動画ファイルも）をVivaldiのWEBパネルで連続再生できることを知ったので、今回このことをブログに書こうと思います。( ´ ▽ ` ) .｡oO（ 伝説の「音楽パネル」の復活！？w ）

ローカルにある音楽データを再生できる簡易プレイヤーをパネルに表示できた。→Vivaldiブラウザのウェブパネルに簡易音楽プレイヤーを追加 - adbird（広告鳥） 備忘録 https://t.co/HYdAqouIAx #VivaldiJP #Vivaldi_Tips pic.twitter.com/RW100B6cZB

— 広告鳥 (@adbirdbrain) 2018年3月21日

やり方はすごく簡単です！広告鳥さんのブログに書いてある通り、MacならテキストエディットなどのアプリにHTMLソース（※以下のリンク先に掲載）をコピペし、HTMLファイルを作成した後、それをVivaldiで開いてWEBパネルに追加するだけです。連続再生したいローカルファイルは、WEBパネルにそのままドラッグ＆ドロップすればOKです！(*^^*)

・Vivaldiブラウザのウェブパネルに簡易音楽プレイヤーを追加：adbird（広告鳥） 備忘録
・いまさらHTML5 （簡易プレイヤー編）：Qiita・・・広告鳥さんが参照した「Qiita」の記事。

実際再生してるところを撮影したスクリーンショットが、こちらの画像です。





ちなみに音楽ファイルだけでなく、動画ファイルも連続再生できます。動画はパネル全体に全画面表示することも可能です。





補足事項としては、まずスキップボタン（次のファイルの再生へと移るボタン）は右端に表示されるので、パネル幅が狭いとスクロールが必要になるかもしれません。（※. 広告鳥さんがソースを更新してくれて、スキップボタンが右端ではなく、ファイル名の下に表示されるようになりました。詳しくは「追記」を参照！(*^^*)/ 広告鳥さんに感謝！！）ちなみに下矢印（『 ↓ 』）は、ダウンロードボタンです。



それとこのプレーヤーではスキップすることはできますが、1つ前のファイルに戻る機能はありません。

あと広告鳥さんのスクリーンショットの様に、再生するために読み込んだファイルの一覧に再生順序を表示するには、読み込むファイルのファイル名そのものを編集（※. 例えばリストの1番目に追加したいファイルなら、そのファイルのファイル名の頭に「01」と付けるとか）する必要がある（※. 広告鳥さんがソースを更新してくれて、最新版ではリスト番号が自動的に追加されるようになったそうです。 詳しくは「追記 その2」を参照！ Σ(>ω<ﾉ)ﾉオオォッ!! ）ようです。

なお単にローカルの音楽ファイルや動画ファイルを単体でパネルで再生するだけなら、ブラウザで再生できるファイル形式なら、直接開けば再生できます。例えばローカルのフォルダをVivaldiで開いてそれをパネルに表示し、クリックすると普通に再生できます。以下の画像が、その時撮影したスクリーンショットです。





率直に言って、実用度はそんなに高くないと思いますが… どうしてもローカルに置いてる音楽ファイルをパネル再生したい方は、これらの方法を試してみてはいかがでしょう？(*^^*)







【関連リンク】
・Vivaldiブラウザのウェブパネルに簡易音楽プレイヤーを追加：adbird（広告鳥） 備忘録
・いまさらHTML5 （簡易プレイヤー編）：Qiita
・Vivaldi WEBパネルの活用方法まとめ #VivaldiJP：Togetter

【関連記事】
・Vivaldi WEBパネルのお薦め活用法 : Kyu3’s Blog

【追記（2018年3月21日）】

このパネルに関してツイートしたところ、広告鳥さんが、スキップボタンがパネル幅が狭くても隠れないように、ファイル名の下に表示されるように、HTMLソースを変更してくれました！ヽ(*´∀`)ノ広告鳥さん感謝！！

「次へ」ボタンが隠れる問題へ対処しました。ブログの記事を更新していただいて、あらためてｈｔｍｌソースを保存して使用してみてください。 https://t.co/HYdAqoMjs5

— 広告鳥 (@adbirdbrain) 2018年3月21日

あとさっき気づいたのですが、リストに新たに音楽ファイルや動画ファイルを追加したい場合は、追加したいファイルをそのままドラッグ＆ドロップすると、既存のリストの下に追加される形で、ファイルがリストに追加されます。

【追記 その2（2018年3月25日）】

広告鳥さんからのリプで知ったのですが、広告鳥さんのHTML 5 メディアプレーヤーはさらに進化していて、リスト番号が自動的に追加されるようになったそうです！Σ(>ω<ﾉ)ﾉ おぉ〜!!

一部修正。プレイリストの曲名に番号が付くようにした。背景色・フォント色を変更。など→Vivaldiブラウザのウェブパネルに簡易メディアプレイヤーを追加 https://t.co/HYdAqouIAx #VivaldiJP #Vivaldi_Tips

— 広告鳥 (@adbirdbrain) 2018年3月25日

早速試してみたら、確かにリスト番号が自動的に追加されるようになってました！



あと広告鳥さんのブログでも紹介されてる、往年の音楽プレーヤーソフト「Winamp」をHTML 5とJavaScriptで再現した「Winamp2-js」も試してみました！



こちらはJavaScriptも使ってるからか、かなり多機能！スキップだけでなく1つ前の曲に戻る機能もありますし、イコライザーで音質を変えることもできます。(*^^*)

ただ広告鳥さんも指摘している通り、デフォルトだとボタンやメニュー類が小さ過ぎるので、こんな風に表示を拡大したり、あとイコライザーがいらない場合は非表示（※. イコライザー右上の『X』ボタンをクリック）にしたり、あとはプレイリストの表示部分を大きくしたり（※. 右下のハンドル部分をドラッグ）等々して、多少カスタマイズした方が使いやすいと思います。





ちなみに「Winamp2-js」の操作方法などの詳しい情報は、以下のリンク先の『GIGAZINE』の記事に掲載されているので、興味のある方は見てみてはいかがでしょう？







【関連リンク】
・WinampをHTML5とJavaScriptで再現した「Winamp2-js」：GIGAZINE

【追記 その3（2018年3月27日）】

広告鳥さんからのリプで知ったのですが、今度はファイルを「開く／追加」ボタンが追加されたそうです！！(>ω<ﾉ)ﾉ おぉ〜!!

ついに！！ @z7wacg2u さんからJavaScriptソースの提供をいただき、「開く／追加」ボタンが付きました！ @z7wacg2u さん、ありがとうございました。→ https://t.co/HYdAqouIAx #VivaldiJP #Vivaldi_Tips

— 広告鳥 (@adbirdbrain) 2018年3月27日

こんな感じになりました。 pic.twitter.com/WMyD3C3BLo

— 広告鳥 (@adbirdbrain) 2018年3月27日

デザインも洗練されてきて、更に良い感じに♪ (*^^*)

ちなみに広告鳥さんのブログによると、これまで通り、ドラッグ＆ドロップでもファイルを追加できるとのこと。


【関連リンク】
・Vivaldiブラウザのウェブパネルに簡易メディアプレイヤーを追加：adbird（広告鳥） 備忘録

【追記 その4（2018年3月30日）】

ファイルを「開く／追加」ボタンが追加されたとのことだったので、早速試してみました。Mac版でも問題なく開けました！(*^^*)/