WordPressのAudio ショートコード(埋込プレーヤ)を使用する

更新日:

当ブログは、LPレコードのハイレゾ化をメインテーマにしていますので、オーディオ用の埋込メディアプレーヤを多用しています。 WordPressにした後も、以前のホームページ・ビルダーRapidweaver7の時に使っていた、埋込プレーヤAudio.jsを通常のaudioタグで囲って埋込プレーヤを継続して使用していましたが、WordPressには、簡単にメディアプレーヤを埋め込める、Audioショートコードの存在を知りました。 Audioショートコードに切り替えることにしましたものの、一部不具合が生じたので、回避した顛末をブログします。

 

スポンサーリンク

そもそも、「Audioショートコード」とは

WordPress バージョン 2.5 から ショートコード(Shortcodes)というものがサポートされました。 これは投稿内容で使えるマクロを作るために導入されました。 Audioショートコードは WordPress 3.6 で導入されました。(プレーヤの外観からみてMediaElement.jsベースが組み込まれていると推察されます)

Audioショートコードの基本的使い方は、非常に簡単でWordPressの投稿記事内に、[ audio src="音源ソースアドレスURL”]で表記しますと、下の、Audio埋込プレーヤが表示される様になり非常に便利です。

(記事に直接、"音源ソースアドレスURL”を表記してもプレーヤが表示されますが、再生しない場合があり、勧めできません)

 

ただ、WordPressに組み込まれている「Audioショートコード」を使用すると、以下の問題が生じてしまいました。

注意ポイント

  1. プレーヤの横幅サイズ等のカスタマイズが簡単に出来ません。
    Audioショートコードのプレーヤは、横幅サイズが画面フルサイズになってしまいます。
  2. 外部リンク・ブログカードと誤認してしまう。
    Simlycity2テーマでは、外部リンクブログカードを有効にすると、Audioショートコードで指定したアドレスを外部カードと誤認して、プレーヤが、ブログカードになってしまいます。

対策として、以下に述べるMediaElement.jsプラグインをインストールすると、上の問題が回避されることが判りました。

 

「MediaElement.js - HTML5 Audio and Video」プラグインの導入と使い方

1.MediaElement.jsプラグインのインストール

プラグインの新規追加>検索>「MediaElement.js - HTML5 Audio and Video」をインストールして有効にします。

 

2.外部ブログカードについて

注意!

外部ブログカードは、Simplycity2テーマ限定ですのでご注意ください。

外部ブログカードは、外観>カスタマイズ>外部プログカード(外部リンク)から、ブログカード有効にレ点を入れて有効になります。 予めMediaElement.jsプラグインをインストールしておくことで、外部ブログカードが有効になっても、「Audioショートコード」をブログカードと誤認することが無くなりました。

3.Audio埋込プレーヤの横幅サイズ設定について

1)横幅が画面のフルサイズなのは、好ましいとは思えず、横幅の基本(デフォルト)サイズを300ピクセルに設定しました。

設定>MediaElement.jsから、下のように設定し、「変更を保存」をクリックします。

以上の設定で、個別に横幅サイズ指定をしない限り、全てのページのAudio埋込プレーヤは、下の様な横幅が300px(デフォルト)になります。

 

2)個別にAudioプレーヤの横幅サイズを設定するには

「Audioショートコード」に、width="サイズ”を以下のように付加指定します。

[ audio width="サイズ” src="音源ソースアドレス”]

注意

MediaElement.jsと競合するプラグインがある場合は、以下のようにaudioの前にmejsをつけます。 出来るだけ、「mejsaudio」にすることをオススメします。(2019/6/27 追記)

mejsaudio width="サイズ” src="音源ソースアドレス”]

 

(例)画面からはみ出たら横スクロール

.Audioプレーヤに影をつける

デフォルトの外観は、フラットで味気ないので、外周に影をつけるCSSの設定です。

(影が付いた、プレーヤ外観)

このブログは、Simplicity2テーマを使用させて頂いていますので、 child: Stylesheet (style.css)に以下のコードを記述しました。

 

注意ポイント

補足 Audioプレーヤの横位置設定

例えば、プレーヤをテーブルのセル内にセンタリングするには、以下のように"margin"を使います。 <div style="width: 300px; margin: 0 auto;">【audioショートコード】</div>

また、プレーヤを右に寄せる場合は、<div style="margin-left: 100%;">【audioショートコード】</div>で画面の右端に移動します。 を変えれば(余白が調整されますので)位置調整ができます。

 

では、実際にAudioショートコードを使って音声プレーヤを埋め込んでみます。

イ・ムジチ合奏団 フェリックス・アーヨ(ヴァイオリン)が弾いている ヴィヴァルディ: 協奏曲集《四季》 作品8の1‐4 (冬)の第1楽章を埋め込んでみます。 録音は、1957年で、当時ベストセラーになりました。 レコードからハイレゾ録音したものを、AAC256kbps(fc=48khz)へエンコードしています。

 


ヴィヴァルディ: 四季(冬)の第1楽章(プレーヤサイズ:デフォルトの300px)

 


同曲で、Audioショートコードにwidth="500”を付記して、プレーヤのサイズを500pxにしてみました。

画面からはみ出たら横スクロール

プレイリスト:ビバルディ四季-冬の全楽章

 


スポンサーリンク

〜〜〜〜〜〜〜〜〜〜〜

おすすめ記事

1

  レコードのハイレゾ録音へのヒント(Tips)   ハイレゾ録音のヒントになればと、 今までのレコードのハイレゾ録音を通して、思いつくまま必要と思われることを書き留めましたのでご ...

2

  これまでの当ブログ記事(テストレコードなどのブログ)の知見を通して、アナログ・レコードが音質的に不利な点が多々見つかりました。 アナログレコードの音質を好ましく思っている一人で、本当はあ ...

3

年代モノのレコードプレーヤTRIO(KP-51F)を使ってレコードのハイレゾ録音を行っていますが、このプレーヤの実力を知るためにテストレコード(AD-1)使って定性的な特性を調べ、断片的な記事を投稿し ...

4

eonkyoからDL購入したハイレゾファイルを基準音源にして、基準音源と同一録音のレコードをMCカートリッジとMMカートリッジでハイレコした音源の音質比較を試みました。 MCカートリッジは、オルトフォ ...

5

「HAP-Z1ESのDSEEとDSDリマスタリングエンジンの効果検証」(以前のブログ記事)は、 実際のLPレコードからハイレゾ化したリアルサウンドでDSEEを評価したものでした。 今回は、正弦波の組 ...

Copyright© ハイレコのブログ , 2019 All Rights Reserved Powered by AFFINGER5.