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のブラウザで閲覧するまでの紹介です。　

次のステップとしては、スマホで同じ様に閲覧したくなりますがPCと違って制約が伴い簡単ではありませんでした。　下のページで説明しています。

: NAS内にHTMLで作成したAudio.js音声プレイリストを配置してスマホで閲覧する

前回記事（ここをクリック）は、Buffaloの NAS（Network Attached Storage）に配置する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

Wi-Fiルータ Buffalo

”WSR-2533DHPL2/NB” をAmazonで確認

M1-MacBook Air

”Mac book air” をAmazonで確認

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

NASに配置するフォルダやファイル（Tree構成）

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

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

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

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

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

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

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

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

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

Step
1 Audio.jsの準備

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

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

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

<!DOCTYPE html>
<html>
<head>
<!--  Responsive meta  -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- このページのindexを除外 --> 
<meta name="robots" content="noindex, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>聴き逃し番組</title>
<!--jQueryのロード-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--audio.min.js を読み込む-->
<script src="../audiojs/audio.min.js"></script>
<!--audiojs用 PlayList script-->
<script>
jQuery(function ($) { 
var audio_player_index = audiojs.createAll({
trackEnded: function() {
if($('ol.audio li.playing').hasClass('last')){ //li classが"last"になったら停止
audio.stop();
}
var next = $('ol.audio li.playing').next();//next()メソッドで次の要素を取得
if (!next.length) next = $('ol.audio li').first();//first()メソッドで、現在マッチしている要素の中で最初の要素を取得
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'));
audio.play();
}
});
// Load in the first track  
var audio = audio_player_index[0];
first = $('ol.audio a').attr('data-src');
$('ol.audio li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol.audio li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.play();
});
});
</script>
<style>
.audiojs { width:330px;}.audiojs .scrubber { width:160px; }/*audiojs playerの横サイズ*/		
ol.audio a {color:#424242; text-decoration: none; }
ol.audio li.playing a {padding-left: 0.8em; color: black; font-weight:bold; background-color: yellow;}
ol.audio li.playing:before { content: '♬'; margin-left:-10px; color:red;}
li {font-size:0.8em;line-height:2.0em;border-bottom: 1px solid #ccc;}
</style>
</head>
<body style="margin-left:20px;">
<h3>聴き逃し番組 Play List</h3>
<audio preload="none"></audio>
<div style="max-width:500px;">
<ol class="audio" style="list-style: none;margin-left:-25px;">
<li class="last"><a class="wp" href="#!" data-src="聴き逃し番組−1.mp3">らじる★らじる・聴き逃し番組−１</a></li>
<li class="last"><a class="wp" href="#!" data-src="聴き逃し番組−2.mp3">らじる★らじる・聴き逃し番組−２</a></li>
<li class="last"><a class="wp" href="#!" data-src="聴き逃し番組−3.mp3">らじる★らじる・聴き逃し番組−３</a></li>
<!-- 新たな音声ファイルを追加するには、上の li 行をコピーして下の行にペースト挿入し、音声ファイルを上書きして行く -->	
</ol>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>聴き逃し番組</title>

jQuery(function ($) {

var audio_player_index = audiojs.createAll({

trackEnded: function() {

if($('ol.audio li.playing').hasClass('last')){ //li classが"last"になったら停止

audio.stop();

}

var next = $('ol.audio li.playing').next();//next()メソッドで次の要素を取得

if (!next.length) next = $('ol.audio li').first();//first()メソッドで、現在マッチしている要素の中で最初の要素を取得

next.addClass('playing').siblings().removeClass('playing');

audio.load($('a', next).attr('data-src'));

audio.play();

}

});

// Load in the first track

var audio = audio_player_index[0];

first = $('ol.audio a').attr('data-src');

$('ol.audio li').first().addClass('playing');

audio.load(first);

// Load in a track on click

$('ol.audio li').click(function(e) {

e.preventDefault();

$(this).addClass('playing').siblings().removeClass('playing');

audio.load($('a', this).attr('data-src'));

audio.play();

});

</script>

<style>

.audiojs { width:330px;}.audiojs .scrubber { width:160px; }/*audiojs playerの横サイズ*/

ol.audio a {color:#424242; text-decoration: none; }

ol.audio li.playing a {padding-left: 0.8em; color: black; font-weight:bold; background-color: yellow;}

ol.audio li.playing:before { content: '♬'; margin-left:-10px; color:red;}

li {font-size:0.8em;line-height:2.0em;border-bottom: 1px solid #ccc;}

</style>

</head>

<h3>聴き逃し番組 Play List</h3>

<li class="last"><a class="wp" href="#!" data-src="聴き逃し番組−1.mp3">らじる★らじる・聴き逃し番組−１</a></li>

<li class="last"><a class="wp" href="#!" data-src="聴き逃し番組−2.mp3">らじる★らじる・聴き逃し番組−２</a></li>

<li class="last"><a class="wp" href="#!" data-src="聴き逃し番組−3.mp3">らじる★らじる・聴き逃し番組−３</a></li>

</ol>

</div>

</body>

</html>

HTMLポイント説明

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

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

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

ーーーーーーー

NASにに配置するフォルダやファイル（Tree構成）

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

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

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

Step
1 BuffaloNAS.com 登録

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

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

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

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

: WordPress環境でAudiojs Playerを使ったplaylistの作成

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

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

NAS内にHTMLで作成したAudio.js音声プレイリストを配置してスマホで閲覧する