未分類

ワンクリックで音源再生!ワードプレスでMP3の埋め込み再生の設定方法(スマフォ対応)

更新日:

度々当ブログで活用しているMP3の埋め込み再生。クリックすればその場で音楽が聴けるので、簡易デモ音源での解説に効果的です。

1

MP3の埋め込み再生設定方法

以下の再生ボタンをクリックしてみてください。

このように、簡単に音楽を再生できる方法をご紹介します。

まず、MP3ファイルを用意します。

MP3

MP3ファイル作成についての参考記事は以下。

basslesson.toruhoshino.com

 

ワードプレス「メディアを追加」画面より

MEDHIAを追加

「ファイルをアップロード」を選択

ファイルをアップロード

「ファイルを選択」から任意のMP3を選択し、「メディアを挿入」画面に戻ったら右下のタブ「メディアファイルへのリンク」を選択し、青色のボタン、「投稿へ挿入」をクリックすれば設定完了です。

メディアファイル

この時、「メディアプレイヤーを埋め込む」「添付ファイルページへのリンク」を選択しないでください。

画面上にはこんなふうに青文字でmp3が反映されていると思います。

画面上には

実際の画面上にはこう表示されます。

このままでも音源再生はできますが、パソコンのみの対応で、スマフォでは音楽を聴けないことが多いです。なので、全ての媒体で聴けるようにします。

テキストをクリックし、このmp3の情報を見てみます。

くぇq

次のようなソース画面が表示されます。

<a href="http://basslesson.toruhoshino.com/wp-content/uploads/2015/04/cdec.mp3">cdec</a>

 

このソースの、太字の部分、httpからmp3までの部分をコピペし、

<a href="http://basslesson.toruhoshino.com/wp-content/uploads/2015/04/cdec.mp3">cdec</a>

 

以下のソースの「src="" controls」のところの、「””」の間に入れます。

※コピペした大元は消しちゃって結構です。

<a href="http://basslesson.toruhoshino.com/wp-content/uploads/2015/04/cdec.mp3">cdec</a>

<audio src="" controls="controls"></audio>

<audio src="http://basslesson.toruhoshino.com/wp-content/uploads/2015/04/cdec.mp3" controls="controls"></audio>

これで、完成です。

因みに、私は「Add Quick Tag」というプラグインを設置しています。

テキスト画面からワンクリックで「<audio src="" controls="controls"></audio>」のソースをはめ込むことが出来るのですごく便利です。

 

設定が反映されなかったら確認してみて下さい

MP3の保存形式は英語にしましょう。以下のように日本語名のファイルも、設定に反映されません。

ブルース

また、ワードプレスのテーマによっても反映されない環境があるようです。現在のワードプレスのテーマは「Catch box」です。

 

MP3の埋め込み再生の使用用途

動画で解説するまでもない、5~30秒程度の簡易音源の再生向きです。ウォーキングベースラインの解説の場合、1小節、4小説ごとのラインの解説などで、以下のように譜面と一緒にMP3の埋め込み再生を使っています。

1

質問受付中

ご不明点がありましたら、対応致します。

べーす
sukaipu

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

【編集後記】

実はこのテの質問、結構多いんです。

ここ2年間。ずっとジャズ聴きながらワードプレスに張り付きっぱなしですからね。そりゃー詳しくなるか。

3月1日でもうすぐまる2年更新です。

さーいつまで続くかなあ(*_*)

⇒筆者の演奏スケジュール・2月20日更新です!



infomation


ベース ブログランキングへ
↑日本一のウォーキングベースサイト目指してランキング参加中です!


link_youtubelink_facebooklink_ameba

-未分類
-

Copyright© 元パンクロッカーでも弾ける!超かんたんウォーキングベースライン作成講座! , 2024 All Rights Reserved Powered by AFFINGER5.