こちらの記事で紹介した音の出るボタンですが、私は音声データが .mp3だけでも良いかなと思ったので、.mp3ファイルだけで音の出るボタンを作った方法もメモにしました。
この素晴らしいボタンの開発者SyncerさんのページからJavaScript（「sounds-multi.js」）をダウンロードするところまでは上記の記事と同じです。
ダウンロードしたJavaScriptを所々コメントアウト
方法は、ダウンロードしたJavaScriptファイルのうち数カ所削除、もしくはコメントアウトするだけです。
コメントアウトしてちゃんとボタンが動いているのを確認できたら、そのコメントアウトの部分は削除してしまっても良いと思います（思った動作をしない場合は、キャッシュを削除してからもう一度確認してみてください）。
削除またはコメントアウトする部分は下記です。
// コメントアウトする部分
// 37行目
var setDir = './' ; // 音声ファイルがあるフォルダ(最後は[/])
// 62, 63行目
if( audio.canPlayType( 'audio/mp3' ) )
{
// 65行目〜71行目
}
// ブラウザが[.wav]に対応している場合は[.wav]を読み込む
else if( audio.canPlayType( 'audio/wav' ) )
{
audio.src = setDir + file + '.wav' ;
}さらに、64行目についても削除またはコメントアウトし、その下にaudio.src = file;を追記します。（64行目と同じコードから「setDir + 」と「 + '.mp3' 」を除いた部分。）
// 64行目: オリジナルをコメントアウト
// audio.src = setDir + file + '.mp3' ;
// その下に下記を追記
audio.src = file;上記の結果、私のファイルは最終的にこのような感じになりました。
（下記はSyncerさんの「sounds-multi.js」を一部コメントアウト・加筆したものです。上記で示している行数はダウンロードしたオリジナルのJavaScriptのものなので、下記の行数とは異なります）
// グローバル変数
var syncerSounds = {
flag: {},
currentTime: null,
};
// 即時関数
(function () {
// 設定
var setClass = 'sounds'; // ボタン要素のクラス名
//var setDir = ''; // 音声ファイルがあるフォルダ(最後は[/])
var setStopButtonId = 'stop-button-syncer'; // 停止ボタンに付けるID
// クラス名が付いた要素を取得する
var sounds = document.getElementsByClassName(setClass);
// 全ての要素にクリックイベントを設定する
for (var i = 0, l = sounds.length; l > i; i++) {
// クリックイベントの設定
sounds[i].onclick = function () {
// ファイル名の取得
var file = this.getAttribute('data-file');
// 一度生成したエレメントは生成しない
if (typeof (syncerSounds.flag[file]) == "undefined" || syncerSounds.flag[file] != 1) {
// 生成するエレメントの調整
var audio = document.createElement('audio');
// エレメントのIDを指定
audio.id = file;
// ブラウザが[.mp3]に対応している場合は[.mp3]を読み込む
/*if (audio.canPlayType('audio/mp3')) {
audio.src = setDir + file + '.mp3';*/
audio.src = file;
/*}
// ブラウザが[.wav]に対応している場合は[.wav]を読み込む
else if (audio.canPlayType('audio/wav')) {
audio.src = setDir + file + '.wav';
}*/
// を生成する
document.body.appendChild(audio);
}
// 初回再生以外だったら音声ファイルを巻き戻す
stopCurrentSound();
// 音声ファイルを再生[play()]する
document.getElementById(file).play();
// 最近再生した音声としてセット
syncerSounds.currentTime = file;
// 初回再生が終わった判定用に[syncerSounds.flag]の値を0から1に変更する
// エレメントを何度も生成しないようにするため
syncerSounds.flag[file] = 1;
// 終了
return false;
}
}
// 前回の音声を停止する関数
function stopCurrentSound() {
var currentSound = document.getElementById(syncerSounds.currentTime);
if (currentSound != null) {
currentSound.pause();
currentSound.currentTime = 0;
}
}
// 停止ボタンをクリックした時のイベント
document.getElementById(setStopButtonId).onclick = function () {
stopCurrentSound();
return false;
}
})();そしてこのファイルを使用中のWordPressテーマフォルダにアップロードし、footer.php等の</body>タグの前に下記を記入します（既に記述してある場合はこれは飛ばします）。
<!-- クリックで音が出るボタンのJavaScript読み込み -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/sounds-multi.js" ></script>「src=" "」に指定するパスについては冒頭で触れた記事の「JavaScriptファイルの読込み」の部分をご参照ください。
ボタンの作成
あとは音声データやボタン要素（画像やテキストなど好きなもの）を用意し、下記のようにボタンにするものを<a></a>タグで囲います。その際、「data-file=" "」に指定するものは音声ファイルのURLをそのまま記述します（なので、.mp3ファイルと言わず、別の音声データでも大丈夫だと思います）。
<a href="#" class="sounds" data-file="音声ファイルのURL">
<img タグなどなど >
</a>私は今のところ上記でボタンが上手く動作してくれています。こんなことしなくても、元のコードのままで.mp3だけで回せるのかな？とか、でも.wavファイルを入れなかったらエラーになるかな？とか、理解しきれていない部分もありますが、ご参考までに・・・＊