楽器の演奏は、プログラム言語javascriptで行っています。演奏（音楽）とは関係のない話題になりますが、書き留めて置きます。
とりあえず、演奏できればと思っていましたが、不都合な箇所の見直しをはじめました。
推薦されたjavascriptの記述順序
//1. 共有変数は必ず先頭に書くlet audiofile = {}; // 音源用。変数を宣言する。
// 2. メイン処理を「関数」として定義しておく
function startMainProcess() {
console.log("メインプロセスを開始しました。");
// a_l を使った処理（例：クリックで21番の音を鳴らす）
window.onclick = () => {
......
......
};
}
// 3. 読込用関数: 音源ファイルの事前読込
async function setupAudio() {
for (let i = 21; i < 109; i++) {
const path = ".........";
audiofile[i] = new Audio(path);
// 読込の負荷軽減
await new Promise(resolve => setTimeout(resolve, 50));
}
// 4. ここで呼び出す
startMainProcess();
}
// 実行
setupAudio(); （2026年3月5日）
GoogleのAI検索で、ファイルの事前読み込みについて、尋ねたら、非同期の方法を教えて貰った。非同期だと、一斉に多数のファイルにアクセスする心配があると質問すると、小分けにして、非同期でアクセスする方法を提案された。音源ファイルのサイズはそれ程大きくはないが、数が多い。それとPromiseとawaitについても教わった。他にもありますが、後日にします。（2026年3月2日）
最近、AI検索を活用して、プログラムの見直しを行っています。結果が出るのが速い。優秀な上司や部下が増えた感じです。（2026年2月28日）
HTML、CSS、Javascriptは、進化しており、ページの書き換えに迫られています。旧仕様の互換性が保たれている場合がありますが、保たれてない場合があります。Javascriptの新しい仕様は、AIモードで検索して、教わることが多いですし、速いですね。
記録として記して行ければと思っています。（2026年2月26日）
if (event.repeat) return
event.repeat は、 キーが押しっぱなしになっている場合、 true の論理値を返します。ブラウザピアノでキーを押しっぱなしでキーが連打される時に、
if (event.repeat) return;
で、押しっぱなしの連打を防ぐことができます。以前は、keydownとkeyupの２ヶ所で対応していたが１行で済むようになった。（2026年2月24日）
音源ファイルの音を出す２通りの方法
Javascriptのソースを抜き書きします。省略した箇所があります。詳しい説明はできませんが。
⓵ JavaScriptとjqueryを利用する。jqueryは音源ファイルが事前に読み込まれている過程を知るために使用しています。
Audio でサウンド再生のページを参考にしましたが、音の再生が遅れると言われ、以下のように改変しました。
【mainのJavaScript】
まず、音源ファイルをa_lに読み込みます。
let a_l={};
for (i=21;i<109;i++){
var path="piano/0/" + i + ".mp3";
a_l[i] = new Audio(path); // Audioの最初のAは大文字にする
}
音源の再生
window.addEventListener('keydown', function(e){
code=event.code;
event.preventDefault();
-----
-----
a_l[kid].volume=avlm; // 音量 0=＜avlm＜=1
a_l[kid].currentTime = 0; // 音源ソースの最初に戻る
a_l[kid].play(); // 音源の再生
// a_l[kid] = new Audio(a_l[kid].src);が入れてありましたが、不要です。
}, false);
音を止める。
window.addEventListener('keyup', function(e){
a_l[kid].pause();
}, false);
【jQueryで書いた、音源ファイル読込中を表示する方法】
＜script> // ＜は半角に変更して下さい。
$(window).on('load', function() {
$('#loader-bg').hide();
});
＜/script> // ＜は半角に変更して下さい。
htmlファイルに次を追加する。
＜div id="loader-bg">＜img src="img/loading.gif">＜/div> // ＜は半角に変更して下さい。
ここまでの方法はトップページのピアノでは使用していません。音源ファイルの大きいピアノで使用しています。→ → → サンプル
⓶ Web Audio API BufferLoaderの利用
次のサイトと他のサイトを参照しました。
web-audio-api-bufferloader
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
// Audio 用の buffer を読み込む
var getAudioBuffer = function(url, fn) {
var req = new XMLHttpRequest();
// array buffer を指定
req.responseType = 'arraybuffer';
req.onreadystatechange = function() {
if (req.readyState === 4) {
if (req.status === 0 || req.status === 200) {
// array buffer を audio buffer に変換
context.decodeAudioData(req.response, function(buffer) {
// コールバックを実行
fn(buffer);
});
}
}
};
req.open('GET', url, true);
req.send('');
};
// サウンドを再生
window.addEventListener('DOMContentLoaded', function(){
window.addEventListener('keydown', function(e){
code=event.code;
event.preventDefault();
var playSound = function(buffer) {
// source を作成
var source = context.createBufferSource();
// buffer をセット
source.buffer = buffer;
// GainNode
const gainNode = context.createGain()
avlm=vlm*0.1; // 音量 0＝＜vlm＜＝10
gainNode.gain.value = avlm // ボリュームを変える
source.connect(gainNode)
// Destination
gainNode.connect(context.destination)
// context に connect
// source.connect(context.destination);
// 再生
source.start(0);
};
// 音を再生
var path="piano/0/" + kid + ".mp3";
getAudioBuffer(path, function(buffer) {
playSound(buffer);
});
}, false);
});
関連サイト
・Web Audio API スタートガイド
キーの区別
キーボードを押した時、どのキーが押されたかは、e.keyCodeで取得していましたが、ブラウザ間の互換性がなかったので、２種類のプログラムで対応していました。現在では、e.keyCodeは非推薦になり、event.keyやevent.codeが推薦されています。event.keyでは、各キーに割り当てられている文字、数字、記号、"Shift"、"Control"が出ます。でも、￥｜と＼＿キーでは、同じ記号の￥が出ます。event.codeでは、異なるコードが返ってきますので、こちらを使って、ピアノを弾くことにします。(2021/02/17)
event.codeでは、左右のShiftキーと左右のControlキーがそれぞれ区別されます。キーコードとキーボードのことについては、英語のページですが、次のサイトを見て下さい。☛☛☛
次の枠内をクリックして、キーを押すとコードが表示されます。
参照サイト
＞ WEB Piano – HTML5 Audioでピアノを作る (最初、このサイトでevent.keyを知りました。)
＞ KeyboardEvent.key。詳細はこのサイトを見て下さい。
＞ KeyboardEvent.code。詳細はこのサイトを見て下さい。
＞ JavaScriptのキーボードイベント、キー判定にどれつかう？
＞ キーボードのことについては、このサイトを参照して下さい。
Firefoxへの対応
firefoxでは、？を押すと画面左下に検索欄が出て、演奏が中断します。対処方法が分からずにいたのですが、2020年10月半ば頃に、event.preventDefault();で、対処できることが分かり、対応しました。(2021/02/17)
関連サイト
＞ Event.preventDefault()
コメント
(Since Feb/17/2021)