The audio player button I introduced in the following post uses two audio files in accordance with the developer's instruction.
However, I feel that using only the .mp3 file might be enough (due to my laziness), and have no problems so far. So, I'd also like to share how I modified the JavaScript file so as not to cause errors.
Remove or Comment Out Some Lines
After downloading the fantastic JavaScript file from the developer's website, remove (or comment out) some lines as follows.
// lines to remove or comment out
// line 37
var setDir = './' ; // 音声ファイルがあるフォルダ(最後は[/])
// line 62 & 63
if( audio.canPlayType( 'audio/mp3' ) )
{
// from line 65 to 71
}
// ブラウザが[.wav]に対応している場合は[.wav]を読み込む
else if( audio.canPlayType( 'audio/wav' ) )
{
audio.src = setDir + file + '.wav' ;
}In addition, I modified line 64 as follows.
// line 64
audio.src = file;
// removed "setDir" and "'.mp3'" from the originalIt might be safer to comment the lines out first, then removing the lines once you confirmed the button works well. When you check if the modified JavaScript works, you may need to clear the cache of the browser.
My JavaScript After Modification
After commenting out the above lines, my JavaScript file looks like below: the yellow lines indicate where I commented out; the pink line indicates where I slightly modified.
（Below is the modified "sounds-multi.js" that originally written by Syncer.jp.）
// グローバル変数
var syncerSounds = {
flag: {},
currentTime: null,
};
// 即時関数
(function () {
// 設定
var setClass = 'sounds'; // ボタン要素のクラス名
// Emma: Commented out here ↓
//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]を読み込む
// Emma: Commented out here ↓
/*if (audio.canPlayType('audio/mp3')) {
audio.src = setDir + file + '.mp3';*/
// Emma: Modified here ↓
audio.src = file;
// Emma: Commented out from here ↓
/*}
// ブラウザが[.wav]に対応している場合は[.wav]を読み込む
else if (audio.canPlayType('audio/wav')) {
audio.src = setDir + file + '.wav';
}*/
// Emma: Commented out to here ↑
// を生成する
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;
}
})();If everything looks good, upload this file to the current theme directory. Then add a line before the <body> tag probably in the footer.php. These procedures are the same as written in the previous post.
<!-- loading the JavaScript file -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/sounds-multi.js" ></script>Create An Audio Button
Other than modifying the JavaScript file, almost everything is the same as in the previous post. However, one thing differs; when pasting the audio file's URL to data-file=" ", I'm pasting it as it is. We don't have to remove the extension of the file.
<a href="#" class="sounds" data-file="URL of the file">
<img etc. >
</a>Please refer to the following post for the rest of the instructions to use this button.
So far, the audio button works well with the above modifications. Hope this helps as well.