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


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

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

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

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 1
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 1 posted by (C)kyu3

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 5(音楽ファイルを再生)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 5(音楽ファイルを再生) posted by (C)kyu3

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

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 6(動画ファイルを再生)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 6(動画ファイルを再生) posted by (C)kyu3

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 8(動画を全画面再生)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 8(動画を全画面再生) posted by (C)kyu3

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

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 3(スキップメニュー等)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 3(スキップメニュー等) posted by (C)kyu3

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

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

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

Vivaldi 1.0:パネルでローカル音楽ファイルを再生 - 1
Vivaldi 1.0:パネルでローカル音楽ファイルを再生 - 1 posted by (C)kyu3

Vivaldi 1.0:パネルでローカル音楽ファイルを再生 - 2(再生中)
Vivaldi 1.0:パネルでローカル音楽ファイルを再生 - 2(再生中) posted by (C)kyu3

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


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

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


【追記(2018年3月21日)】


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

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 10(スキップボタンがファイル名の下に!)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 10(スキップボタンがファイル名の下に!) posted by (C)kyu3


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

Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 14(ドラッグ&ドロップでリストに追加)
Vivaldi WEBパネル:HTML5のメディアプレヤーを表示! - 14(ドラッグ&ドロップでリストに追加) posted by (C)kyu3


【追記 その2(2018年3月25日)】


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


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

Vivaldi WEBパネルにHTML5メディアプレヤー;リスト番号が自動的に追加 - 2
Vivaldi WEBパネルにHTML5メディアプレヤー;リスト番号が自動的に追加 - 2 posted by (C)kyu3

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

Vivaldi WEBパネルに「Winamp2-js」- 8
Vivaldi WEBパネルに「Winamp2-js」- 8 posted by (C)kyu3

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

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

Vivaldi WEBパネルに「Winamp2-js」- 14:拡大、イコライザー非表示
Vivaldi WEBパネルに「Winamp2-js」- 14:拡大、イコライザー非表示 posted by (C)kyu3

Vivaldi WEBパネルに「Winamp2-js」- 12:パネル上部に位置を変更、イコライザーを非表示
Vivaldi WEBパネルに「Winamp2-js」- 12:パネル上部に位置を変更、イコライザーを非表示 posted by (C)kyu3

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


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


【追記 その3(2018年3月27日)】


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



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

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


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


【追記 その4(2018年3月30日)】


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

Vivaldi WEBパネルにHTML5メディアプレヤー:ファイルを開く事が可能に - 4
Vivaldi WEBパネルにHTML5メディアプレヤー:ファイルを開く事が可能に - 4 posted by (C)kyu3