Post Snippetsを使ったaudiojsのプレイヤーとプレイリストを兼用するショートコードの作成

前回の記事では、jQuery の each() を使い、複数の audiojsライブラリのプレイヤーを配置する際にコンフリクトを防ぐjQueryスクリプトを紹介しました。　今回は、そのjQueryスクリプトを少し改良し、WordPress 上で audiojs プレイヤーを簡単に使い回し出来て、プレイリストも扱えるように出来る Post Snippets プラグインを利用したショートコードの作成方法を紹介します。

audiojsプレイヤーの使い勝手を向上させるために

WordPress で audiojs プレイヤーを使うには、投稿ページに<audio>タグを含めた HTML を記述し、その要素に対応する jQuery や CSS と連携させる必要があります。　これでは使い勝手が悪いですね。

そこで、Post Snippets プラグインを使って、(1)-オプション付きショートコードを作ります。　このショートコードは、(2)-audiojs ライブラリを制御する jQuery、(3)-スタイルを調整する CSS と連携し、ショートコードオプションに応じたaudiojsプレイヤーやプレイリストを簡単に実現できるようになります。　　(1)- 〜 (3)- の詳細については後述します。

これにより、WordPress 上でaudiojsプレイヤーの汎用性を高めて使い勝手を向上させることができます。

今回のオプション付きショートコードで実現できる主な仕様

audiojs のプレイヤーとプレイリストを兼用できること
ショートコードで、単体のプレイヤーとしても、複数の曲を並べたプレイリストとしても利用できます。
audiojs プレイヤーのスキンカラーを指定できること（black、red、green、blue）
ショートコードのオプションでスキンの色を指定できます。サイトのデザインや用途に合わせて、色を自由に選択できます。
オプション指定で、audiojs プレイヤーのサイズやセンタリングを指定できること
プレイリスト使用時に、選択中の曲情報を audiojs プレイヤーの下部に表示できること
リストから曲を選ぶと、その曲名などの情報がプレイヤーの下に自動で表示され、視認性と操作性が向上します。必要に応じて非表示にもできます。
プレイリスト使用時に、リストをクリック（選曲）した際、audiojs プレイヤーの指定位置へ自動スクロールできること
スクロール位置のオフセット（ずらし幅）もオプションで調整可能です。

プレイリストサンプル・DEMO

LA TRAVATA（椿姫）のアリアを聴く

AudioJS_player

下のリストから曲をクリック

Verdi：LA TRAVATA（椿姫）「乾杯の歌」Sop・スコット Ten・ライモンディ
Verdi：LA TRAVATA（椿姫）「花から花へ」Sop・スコット Ten・ライモンディ
Verdi：LA TRAVATA（椿姫）「燃える心を」Ten・ライモンディ
Verdi：LA TRAVATA（椿姫）「プロヴァンスの海と陸」　Bar・バスティアニーニ
Verdi：LA TRAVATA（椿姫）「過ぎ去った日よ」Sop・スコット

(1)- オプション付きショートコードの作成

Post Snippetsプラグインのインストールや使い方は、「小技・事例集」を参照してください。

Post Snippets（バージョンは3.1.6）設定画面は以下の通りで、番号を振ったエリアに従って説明します。　（Post Snippets の最新バージョンは4.xになっていますが、一部不具合と使い勝手が悪く3.1.6バージョンを使っています。）

先ず、「Add New Snippet」ボタンを押します。

① エリアのUntitledにショートコードの名称を記入します。　ショートコード名を、 AudioJS_player にしました。

② エリアに下のショートコード用HTML codeをコピペします。

<div class="js_player {js-centering} {js-skin_color} {js-size} st-list-border" style="{my_style}">
<input type="number" class="offset-input" value="{scroll_offset}" style="display: none;">
<audio src="{src}" preload="{pre}"></audio>
<div style="display:{list-title_disp};margin:15px 0 -10px 0;" class="track-details st-marquee">下のリストから曲をクリック</div>
<p>{content}</p>
</div>

<div style="display:{list-title_disp};margin:15px 0 -10px 0;" class="track-details st-marquee">下のリストから曲をクリック</div>

<p>{content}</p>

</div>

HTML codeの説明

1行目：<div class="js_player ..."> で 1行目から10行目をラップしています。このラップされた js_player 要素には、後述する(2) audiojs ライブラリを制御する jQuery の each() によって一意のインデックス（連番）が割り振られるため、複数のプレイヤーを区別できます。
st-list-border は、リストに下線を付加するAffinger6用のclassを指定しています。
2行目：<input> タグで scroll_offset（数値）を jQuery に渡し、プレイリスト使用時にリストをクリック（選曲）した際、audiojs プレイヤーの指定位置へ自動スクロールさせます。
4行目：<audio> タグは audiojs ライブラリによって audiojs プレイヤーに変換されます。
6行目：プレイリスト使用時、class="track-details" の要素に選択中の曲情報が表示されます。style="display:none" を指定すれば非表示にできます。　また、st-marqueeをクラス指定することで、Affinger6の流れる文字を実現しています。
8行目：{content}で囲み型ショートコードになります。　
単独プレーヤーで使用するには：[AudioJS_player〜][/AudioJS_player]と表記すれば、単独のプレーヤーになり、HTMLcodeの4行にある src="{src}" オプションの srcに音声ファイル(url)を代入すれば当該音声ファイルが再生されます。

プレイリストで使用するには：[AudioJS_player〜]と[/AudioJS_player]の間に曲リスト例（下記）を記述するとプレイリストとして機能します。　<li class="last">のlastで再生が停止します。　lastを削除すると、最終曲から最初の曲にループ（エンドレス）再生します。

<ol class="audio" style="list-style: none;">
<li class=""><a href="#!" data-src="Sound1.mp3">第１楽章:Affettuoso (02:54)</a></li>
<li class=""><a href="#!" data-src="Sound2.mp3">第２楽章:Allegro (02:33)</a></li>
<li class=""><a href="#!" data-src="Sound3.mp3">第３楽章:Larghetto (02:59)</a></li>
<li class="last"><a href="#!" data-src="Sound4.mp3">第４楽章:Allegro (02:49)</a></li>
</ol>

<li class=""><a href="#!" data-src="Sound1.mp3">第１楽章:Affettuoso (02:54)</a></li>

<li class=""><a href="#!" data-src="Sound2.mp3">第２楽章:Allegro (02:33)</a></li>

<li class=""><a href="#!" data-src="Sound3.mp3">第３楽章:Larghetto (02:59)</a></li>

<li class="last"><a href="#!" data-src="Sound4.mp3">第４楽章:Allegro (02:49)</a></li>

</ol>

なお、<p>タグで{content}を囲んでいるのは、WordPressの自動整形機能による<p>タグエラーを防止するためです。（ChromeのHTMLチェッカーで<p>タグエラーになるの防ぎます）

ショートコードのオプション（変数）について
{content}を除き、{}内の文字列が変数（＝オプション）になります。　下に変数の意味を示します。

オプション	意味	Default値
js-centering	プレーヤーを中央に配置する時、player_center を記述	player_center
js-skin_color	プレーヤーのスキンカラー（black、red、green、blue）
js-size	プレーヤーの横幅サイズ。　px300で横幅300pxになる。	px300
my_style	div.js_player要素のスタイルを直書きする。
scroll_offset	プレイリスト使用時に、リストをクリック（選曲）した際、audiojs プレイヤーの指定位置へ自動スクロール（ 0 でスクロールしない）	0
src	単独のプレーヤー時、音源ファイルURLを指定
pre	preloadの略、音声ファイルを先読みするか否かを指定する
list-title_disp	選択中の曲情報が表示/非表示　noneで非表示	none

③ Variables（変数）をカンマ区切りで記述し、「 =」の後がデフォルト値になります。　下で示す内容を ③ エリアに記述します。

 Variables
pre=none,src=url.mp3,js-centering=player_center,js-skin_color,js-size=px300,my_style,list-title_disp=none,scroll_offset=0

④ エリアにショートコード化するので、レ点を入れます。　 ⑤ エリアにはPHPを使っていないので無記入のままです。

⑥ エリアにショートコードの簡単な説明を記載します。（下記は参考です）

終点を[/AudioJS_player]で囲むショートコード。　
プレイヤー単独で使う時は、[AudioJS_player ... ]のsrcに音源ファイルURLを記入し[/AudioJS_player]を記述　プレイリストで使う時は、[AudioJS_player ... ]の後に音声ファイルSRCと楽曲情報を含んだol liリストを記述し[/AudioJS_player]でサンドイッチする。
詳細はhttps://pianoforte32.com/creating-audiojs-player-and-playlist-shortcodes-using-post-snippets/

以上で、(1)-オプション付き囲み型ショートコード [AudioJS_player ... ][/AudioJS_player] の完成です。　

(2)-audiojs ライブラリを制御する jQuery

Step
1 公式GitHubからaudio.js ライブラリをダウンロードする

Source on Github リンクをクリックすると、GitHubのkolber/audiojs ページに遷移します。

step.1

kolber/audiojsページの左にある 赤矢印のボタンを押して、defaultのmasterから gh-pages を選択（レ点）します。（下のスクショ画像参照）

step.2

gh-pages 画面に切り替わったら、右の [Code] ボタンを押して、Daunload ZIP をクリックすると audiojs-gh-pages.zip がダウンロードできます。

step.3

ダウンロードしたaudiojs-gh-pages.zipファイルを解凍すると、下に示す様にaudiojsフォルダーの存在が確認できます。　このaudiojsフォルダーのファイルは、以前ダウンロード出来た内容と同じものです。　audio.js Playerで使用するファイルは、赤矢印で示す３つのファイルです。

audiojsフォルダーをWebサイトのドメイン（例えばWordpressが入っている場所）にアップロードして使います。
audio.min.js

audiojs.swf

player-graphics.gif

Step
2 audiojs ライブラリを制御する jQueryスクリプトの設置

下の、 jQueryスクリプト全てをHTMLの</body>タグ直前にコピペします。
2行目：先ほどアップロードした場所のURLをsrcに記述して、audiojs ライブラリを読込ます。
4行目：以降が、audiojs ライブラリを制御する jQueryスクリプトになります。

<!--audio.min.js を読み込む-->
<script src="https://〜/audio.min.js"></script>
<!-- js_player要素のjQueryスクリプト --->
<script>
jQuery(function ($) {
var allPlayers = [];
$('.js_player').each(function () {
var $player = $(this);
var $audio = $player.find('audio');
// audiojs をこの audio 要素に適用
var audio = audiojs.create($audio[0], {
trackEnded: function () {
// 楽曲リストの <ol class="audio"> が存在しなければプレーヤー単体、存在すればプレイリストと判定
　　if ($player.find('ol.audio').length === 0) { //プレーヤー単体と判定 -> 再生を停止してスクリプトを抜ける
audio.stop();
return; }
var $playing = $player.find('ol.audio li.playing');
if ($playing.hasClass('last')) { // li class="last" 最終楽曲なので、再生を停止してスクリプトを抜ける
audio.stop();
return;
}
var $next = $playing.next();
if (!$next.length) {
$next = $player.find('ol.audio li').first();
}
$next.addClass('playing').siblings().removeClass('playing');
audio.load($next.find('a').attr('data-src'));
audio.play();
//****再生中のタイトルを表示 要素の文字列をresult1に取得
const result1 =$next.find('a').html();
$player.find('div.track-details').html('<p style="color:#006688;line-height:120%;"><b>' + result1 + '</b></p>');
}
});
// このプレイヤーを全体リストに追加
allPlayers.push(audio);
// 楽曲リストの最初トラックを読み込む
var firstSrc = $player.find('ol.audio a').first().attr('data-src');
if (firstSrc) {
$player.find('ol.audio li').first().addClass('playing');
audio.load(firstSrc);
}
// プレイリストの曲をクリックしたとき
$player.find('ol.audio li').click(function (e) {
e.preventDefault();
var src = $(this).find('a').attr('data-src');
if (!src) return;
// 他のすべてのプレイヤーを停止
allPlayers.forEach(function (ap) {
if (ap !== audio) ap.pause();
});
$(this).addClass('playing').siblings().removeClass('playing');
audio.load(src);
audio.play();
//****再生中のタイトルを表示 要素の文字列をresult1に取得
const result1 =$(this).find('a').html();
$player.find('div.track-details').html('<p style="color:#006688;line-height:120%;"><b>' + result1 + '</b></p>');
//**** プレーヤートップ位置＋ offset-input値までスクロール移動する
const position =$player.offset().top; //プレーヤートップ位置を取得
const speed = 300;//移動するスピードを設定
//Post Snippetsの[AudioJS_player]の offset-input値 を取得する　
var offset = parseInt($player.find(".offset-input").val(), 10) || 0;
if ( offset !== 0) { // offsetが 0 なら スクロール を実行しない。
$("html,body").animate({scrollTop:position - offset},speed);//プレーヤートップ位置 ＋ オフセット値にスクロール実行
}
});
// ▶︎/❚❚ ボタンが押されたときも、他のプレイヤーを停止
$player.find('.play-pause').click(function () {
allPlayers.forEach(function (ap) {
if (ap !== audio) ap.pause();
});
});
});
});
</script>

jQuery(function ($) {

var allPlayers = [];

$('.js_player').each(function () {

var $player = $(this);

var $audio = $player.find('audio');

// audiojs をこの audio 要素に適用

var audio = audiojs.create($audio[0], {

trackEnded: function () {

// 楽曲リストの <ol class="audio"> が存在しなければプレーヤー単体、存在すればプレイリストと判定

　　if ($player.find('ol.audio').length === 0) { //プレーヤー単体と判定 -> 再生を停止してスクリプトを抜ける

audio.stop();

return; }

var $playing = $player.find('ol.audio li.playing');

if ($playing.hasClass('last')) { // li class="last" 最終楽曲なので、再生を停止してスクリプトを抜ける

audio.stop();

return;

}

var $next = $playing.next();

if (!$next.length) {

$next = $player.find('ol.audio li').first();

}

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

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

audio.play();

//****再生中のタイトルを表示要素の文字列をresult1に取得

const result1 =$next.find('a').html();

$player.find('div.track-details').html('<p style="color:#006688;line-height:120%;"><b>' + result1 + '</b></p>');

}

});

// このプレイヤーを全体リストに追加

allPlayers.push(audio);

// 楽曲リストの最初トラックを読み込む

var firstSrc = $player.find('ol.audio a').first().attr('data-src');

if (firstSrc) {

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

audio.load(firstSrc);

}

// プレイリストの曲をクリックしたとき

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

e.preventDefault();

var src = $(this).find('a').attr('data-src');

if (!src) return;

// 他のすべてのプレイヤーを停止

allPlayers.forEach(function (ap) {

if (ap !== audio) ap.pause();

});

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

audio.load(src);

audio.play();

//****再生中のタイトルを表示要素の文字列をresult1に取得

const result1 =$(this).find('a').html();

$player.find('div.track-details').html('<p style="color:#006688;line-height:120%;"><b>' + result1 + '</b></p>');

//**** プレーヤートップ位置＋ offset-input値までスクロール移動する

const position =$player.offset().top; //プレーヤートップ位置を取得

const speed = 300;//移動するスピードを設定

//Post Snippetsの[AudioJS_player]の offset-input値を取得する　

var offset = parseInt($player.find(".offset-input").val(), 10) || 0;

if ( offset !== 0) { // offsetが 0 ならスクロールを実行しない。

$("html,body").animate({scrollTop:position - offset},speed);//プレーヤートップ位置＋オフセット値にスクロール実行

}

});

// ▶︎/❚❚ ボタンが押されたときも、他のプレイヤーを停止

$player.find('.play-pause').click(function () {

allPlayers.forEach(function (ap) {

if (ap !== audio) ap.pause();

});

</script>

備考：
複数の audiojs プレイヤーを配置した場合に、排他的に再生されるます。　つまり、ページ内に複数のプレイヤーがある場合、1 つを再生すると他のプレイヤーは自動的に停止します。これにより、複数の音が同時に流れるのを防ぎます。

(3)-スタイルを調整する CSS

WordPressの Stylesheet (style.css)に下のCSSをコピペします。

/*******************************/
/** js_player audiojs の CSS **/
/*******************************/
.audiojs {
border-radius: 8px; /*プレーヤの角R付加*/
padding: 3px 0; /*player 高さ調整 max:6pix*/
margin:10px 0;box-shadow: 5px 10px 10px #c96;/*影を付ける*/
} 
/* player 横幅サイズ max-300px固定 */
.px300 .audiojs { max-width:300px;} 
.px300 .audiojs .scrubber { width:calc(46% - 16px ); } 
.px300 .audiojs .time {margin-right:-7px;}
/* 標準 player 横幅サイズ 　メディアクエリ・レスポンシブ */
.audiojs{max-width:460px ;} 
@media screen and (max-width: 480px){
.audiojs { width:300px;}
.audiojs .scrubber { width:calc(46% - 16px ); }
.audiojs .time {margin-right:-7px;} }
/* audiojs_palayerのセンタリング audioタグの囲み要素 */
.player_center .audiojs {
margin: 0 auto; 
display: block; /* 念のため明示 */
} 
/* スキン色 &nbsp;[AudioJS_player]ショートコード用 色の切り替え */
.red .audiojs {background-image: linear-gradient(to top, #4d192b 0%, #792d3f 38%, #74182e 100%);}
.blue .audiojs{background-image: linear-gradient(to top, #4B79A1 0%, #283E51 50%, #4B79A1 100%); }
.green .audiojs{background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); }
/* [AudioJS_player]ショートコードのPlayList用 CSS */	
ol.audio a {color:#424242;  text-decoration: none; }
ol.audio li.playing a {padding-left: 0.8em; background-color: #FFFF99; color: black; font-weight:bold; }
ol.audio li.playing:before { content: '♬'; margin-left:-20px; color:red;}
/* <li> タグ内の文字列を、一定幅を超えた場合に「端を切り捨てて省略記号（…）」で表示する */
ol.audio li { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 20px; position: relative;}
ol.audio {margin-left:0px;} /* ol先頭位置調整 */

/*******************************/

/** js_player audiojs の CSS **/

/*******************************/

.audiojs {

border-radius: 8px; /*プレーヤの角R付加*/

padding: 3px 0; /*player 高さ調整 max:6pix*/

margin:10px 0;box-shadow: 5px 10px 10px #c96;/*影を付ける*/

}

/* player 横幅サイズ max-300px固定 */

.px300 .audiojs { max-width:300px;}

.px300 .audiojs .scrubber { width:calc(46% - 16px ); }

.px300 .audiojs .time {margin-right:-7px;}

/* 標準 player 横幅サイズ　メディアクエリ・レスポンシブ */

.audiojs{max-width:460px ;}

@media screen and (max-width: 480px){

.audiojs { width:300px;}

.audiojs .scrubber { width:calc(46% - 16px ); }

.audiojs .time {margin-right:-7px;} }

/* audiojs_palayerのセンタリング audioタグの囲み要素 */

.player_center .audiojs {

margin: 0 auto;

display: block; /* 念のため明示 */

}

/* スキン色  [AudioJS_player]ショートコード用色の切り替え */

.red .audiojs {background-image: linear-gradient(to top, #4d192b 0%, #792d3f 38%, #74182e 100%);}

.blue .audiojs{background-image: linear-gradient(to top, #4B79A1 0%, #283E51 50%, #4B79A1 100%); }

.green .audiojs{background: linear-gradient(to bottom, #627d4d 0%,#1f3b08 100%); }

/* [AudioJS_player]ショートコードのPlayList用 CSS */

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

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

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

/* <li> タグ内の文字列を、一定幅を超えた場合に「端を切り捨てて省略記号（…）」で表示する */

ol.audio li { white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-left: 20px; position: relative;}

ol.audio {margin-left:0px;} /* ol先頭位置調整 */

[AudioJS_player ... ][/AudioJS_player]ショートコードの設置例

Case
1 単体プレーヤで使用する

ショートコード中の：赤文字が単体プレーヤで使用する時のオプションになります。

 shortcode
[AudioJS_player pre="none" src="音声ファイル.mp3"js-centering="player_center" js-skin_color="red" js-size="px300"
my_style="" list-title_disp="none" scroll_offset="0"][/AudioJS_player]

例−１：プレーヤのスキン色を red に、横幅サイズを300px 、プレーヤをセンタリング
第１楽章：ヘンデルのバイオリン・ソナタ第４番

例−２：プレーヤのスキン色を blue に、横幅サイズを最大、プレーヤをセンタリング
第２楽章：ヘンデルのバイオリン・ソナタ第４番

例−３：プレーヤのスキン色を green に、横幅サイズを300px 、センタリング解除
第３楽章：ヘンデルのバイオリン・ソナタ第４番

例−４：プレーヤのスキン色を Default に、横幅サイズを最大、センタリング解除
第４楽章：ヘンデルのバイオリン・ソナタ第４番

注記：横幅サイズが小さいスマホで見ると、全てのプレーヤサイズは300pxになります。

Case
2 プレイリストで使用する：例１
【曲目クリック時にオフセット移動】

プレイリストで使用する時は、[AudioJS_player]と終点[/AudioJS_player]の間に曲目リストの<ol>タグを挿入する。
オプション：scroll_offset="80"にしているので、曲目リストのクリック時にプレーヤの上部80pxオフセットして移動

 shortcode
[AudioJS_player player="js_player" pre="none" src="url.mp3" js-centering="player_center" js-skin_color="red" js-size=""
my_style="max-width:500px;margin:0 auto;" list-title_disp="none" scroll_offset="80"]
<ol class="audio" style="list-style: none;margin-top: 20px;">
<li class=""><a href="#!" data-src="Sound1.mp3">第１楽章:Affettuoso (02:54)</a></li>
<li class=""><a href="#!" data-src="Sound2.mp3">第２楽章:Allegro (02:33)</a></li>
<li class=""><a href="#!" data-src="Sound3.mp3">第３楽章:Larghetto (02:59)</a></li>
<li class="last"><a href="#!" data-src="Sound4.mp3">第４楽章:Allegro (02:49)</a></li>
</ol>
[/AudioJS_player]
注記：赤文字が例１に対応するオプションを示します。

ヘンデルのバイオリン・ソナタ第４番
（Vn:グリュミオー /チェンバロ :ラクロワ） 1966年録音

第１楽章:Affettuoso (02:54)
第２楽章:Allegro (02:33)
第３楽章:Larghetto (02:59)
第４楽章:Allegro (02:49)

Case
3 プレイリストで使用する：例２
【曲情報を流れる文字で表示】

プレイリストで使用する時は、[AudioJS_player]と終点[/AudioJS_player]の間に曲目リストの<ol>タグを挿入する。
オプション：list-title_disp=" " noneを削除しているので、選択中の曲情報を audiojs プレイヤーの下部に流れる文字列で表示されます。

 shortcode
[AudioJS_player player="js_player" pre="none" src="url.mp3" js-centering="player_center" js-skin_color="red" js-size=""
my_style="max-width:500px;margin:0 auto;" list-title_disp=" " scroll_offset="0"]
<ol class="audio" style="list-style: none;margin-top: 20px;">
<li class=""><a href="#!" data-src="Sound1.mp3">第１楽章:Affettuoso (02:54)</a></li>
<li class=""><a href="#!" data-src="Sound2.mp3">第２楽章:Allegro (02:33)</a></li>
<li class=""><a href="#!" data-src="Sound3.mp3">第３楽章:Larghetto (02:59)</a></li>
<li class="last"><a href="#!" data-src="Sound4.mp3">第４楽章:Allegro (02:49)</a></li>
</ol>
[/AudioJS_player]
注記：赤文字が例２に対応するオプションを示します。

ヘンデルのバイオリン・ソナタ第４番

下のリストから曲をクリック

第１楽章:Affettuoso (Vn：グリュミオー /チェンバロ：ラクロワ） [02:54]
第２楽章:Allegro (Vn：グリュミオー /チェンバロ：ラクロワ） [02:33]
第３楽章:Larghetto (Vn：グリュミオー /チェンバロ：ラクロワ） [02:59]
第４楽章:Allegro (Vn：グリュミオー /チェンバロ：ラクロワ） [02:49]

iPhoneのボイスメモで撮った音を大きく、クリアーにするには

ハイレゾ音源をエンコードするならMP３かAACか

FFmpegを使用して音声ファイルのアートワーク含めメタデータを操作するオプションのこと

レコードのハイレゾ化のススメ

CDと比較してアナログレコードの音質が好まれる理由を考察する

ハイレコのブログ

Post Snippetsを使ったaudiojsのプレイヤーとプレイリストを兼用するショートコードの作成

audiojsプレイヤーの使い勝手を向上させるために

今回のオプション付きショートコードで実現できる主な仕様

(1)- オプション付きショートコードの作成

以上で、(1)-オプション付き囲み型ショートコード [AudioJS_player ... ][/AudioJS_player] の完成です。

(2)-audiojs ライブラリを制御する jQuery

(3)-スタイルを調整する CSS

[AudioJS_player ... ][/AudioJS_player]ショートコードの設置例

以上、Post Snippetsを使ったaudiojsのプレイヤーとプレイリストを兼用するショートコードの作成でした。

以上で、(1)-オプション付き囲み型ショートコード [AudioJS_player ... ][/AudioJS_player] の完成です。　