広告 iPhone、PC 関連

NAS内にHTMLで作成したAudio.js音声プレイリストを配置してPCのブラウザで閲覧する

スポンサーリンク

 

図に示すBuffaloの NAS(Network Attached Storage)に音声ファイルを保存している場合、音声ファイルの保存先にHTMLで作成したAudio.js音声プレイリストを配置しておくと、パソコンでそのHTMLにアクセスすれば、Safari等のブラウザが開きPlay Listの閲覧と音声ファイルを聴くことが出来ます。

例えば、NHKの「らじる★らじる・聴き逃し番組」のカルチャーラジオ番組は、第1話から13話までのシリーズが通常です。 この番組をNASに保存する時、番組毎の名前でフォルダを作り、そこに講話順に収録した音声ファイルを保存していきます。 番組のシリーズが完結したら同じフォルダ内に今回紹介するHTMLのAudio.js音声プレイリストを作成(配置)しておき、PCでそのHTMLにアクセスすることで、あたかもWebページの様に何時でもプレイリストが表示(聴取)出来ますし、音声ファイルの整理(アーカイブ)も同時に行うことが出来て便利です。

尚、HTMLの作成は若干のスキルと労力が伴いますが後から説明する雛形コードをコピペして li タグ に音声ファイルを追加して行くだけでOKです。。

今回は、NASに配置するHTMLベースのPlay List作成とPCのブラウザで閲覧するまでの紹介です。 

 

NAS接続環境について

  • Wi-Fiルータ:Buffalo WSR-2533DHPL2/NB (PPPoE接続 IPV4)
  • NAS:Buffalo LS-CH1.0TL(LS-CHLシリーズ 1TB)販売終了機種
  • PC:M1-MacBook Air (macOS:13.0.1)及びWindows10

 

NASに音声ファイル用フォルダを作成する

Step
1
NAS共有フォルダの追加

Buffalo NAS Navigator2をPCにインストールして、「Web設定画面」を開き「共有フォルダーの作成」からフォルダー名を取敢えずIOSという名前にして、下の様に設定しました。

blank

 

注記:DLNAサーバーを使用しない
「その他」>「メディアサーバー」で「DLNAサーバーを使用しない」設定にしています。 使用するとアクセスが遅くなります。

Step
2
音声ファイルの保存先フォルダの作成

M1-MacBook AirのFinderを開き、NASをマウントします。 ネットワークからNASを選択して「別名で接続」を選択してユーザ名とパスワードを入力するとNASに接続できます。 先程追加したIOSフォルダをクリックして。このフォルダの中に例えばNHKの「らじる★らじる・聴き逃し番組」名毎のフォルダを作ります。 このフォルダーに「らじる★らじる・聴き逃し番組」から収録した音声ファイルを保存していきます。

Windowsの場合、エクスプローラーでネットワーク > NASを選択 して、上と同じ様に、フォルダーを作成すればOKです。

Step
3
「らじる★らじる・聴き逃し番組」の収録方法

NHKの「らじる★らじる・聴き逃し番組」の収録方法は、「らじれこ( Mac版/Windows版)」などの収録アプリを使う方法がありますが、当ブログで過去に紹介した方法は下の3つになります。 オススメは下の1番です。

 

Audio.js音声プレイリストのHTML

Step
1
Audio.jsの準備

  1. URLをクリックして、「audio.js」のzipファイルをダウンロードします。http://kolber.github.io/audiojs/
  2. 解凍して、3つのファイル『audio.min.js 、audiojs.swf、player-graphics.gif』を前述のIOSフォルダの直下にaudiojsフォルダーを作り解凍した3つのファイルを保存します。

Step
2
Audio.js音声プレイリストのHTMLコード(雛形として)

PCのブラウザでプレイリストの閲覧と音声を聴くために音声ファイルが入っている番組フォルダの中にHTMLを作成(配置)します。 mi等のテキストアプリを使い、ファイル名を「プレイリスト.html」にして作成しています。

HTMLポイント説明

NAS内のファイル指定を行う場合、IPアドレスが変化するので絶対パスは不向きです。 NAS内のファイル指定は下の「NASフォルダのtree構成」を参照して相対パスで表記します。

例えば、18行目:audio.min.jsのscriptを展開するために、1階層上のaudiojsフォルダーを指定するので、相対アドレスで「../audiojs/audio.min.js」と表記しています。

また、音声ファイルの指定は、74行目〜76行目の data-src="聴き逃し番組−1〜3.mp3" で指定しています。(同一フォルダー内にあるので、音声ファイル名を直書き指定でOKです)

ーーーーーーー

NASフォルダのtree構成

blank

M1-MacBook AirのFinderを開き、NASをマウントして、NASに配置したHTMLファイル(プレイリスト.html)をクリックすると、Safari等のブラウザが開き以下の様にプレイリストが閲覧でき、音声もAudiojsプレーヤで聴くことができます。 夫々の番組-1〜3をクリックすると音声が再生されます。 なお、番組が連続して再生する仕様にするには、HTMLコードの <li class="last" >の lastを削除してクラスタを空(<li class="" >)にします。

 

blank

 

外出先で作成したAudio.js音声プレイリストにアクセスする

BuffaloのWebアクセスサービスを利用すると、宅内、外出先に係らずインターネットに接続できる環境であれば、NASのAudio.js音声プレイリストにアクセスできます。(自宅のNASやルータの電源を入れておく)

Step
1
BuffaloNAS.com 登録

Buffaloの「Web設定画面」を開き「その他」>「Webアクセス」で「Web詳細設定」ボタンをクリックして、以下の内容で設定し「保存」ボタンを押します。

blank

Step
2
WebアクセスでAudio.js音声プレイリストにアクセス

PCのブラウザを開き、URL入力欄に http://buffalonas.com/設定した名前/ を入力すると、下の画面が開き、右上の「ログイン」ボタンを押してユーザ名とパスワードでログインすれば、外出先でもNASにアクセスできます。 フォルダーを辿り プレイリスト.html を選択すれば、プレイリストが閲覧でき、音声もAudiojsプレーヤで聴くことができます。

blank

 

以上、NASに配置するHTMLベースのPlay List作成とPCのブラウザで閲覧するまでの説明でした。 今回のHTMLを雛形(参考)にNASに保存された音声ファイルのアーカイブ化にご活用ください。

 

関連記事
blank
WordPress環境でAudiojs Playerを使ったplaylistの作成

Wordpressで音声Playlistを作るには「メディアの追加」から音声ファイル(ID)を選択して音声Playlistを作成するのが簡単ですが、仕様上から音声ファイルのURLでは作成出来ず、またエ ...

 

スポンサーリンク

 

スポンサーリンク

 

Hi-Reco Blog オススメ

をクリック(タップ)してご覧ください。)