ブラウザピアノのプログラムについて

戻る
演奏のプログラムについて
　楽器の演奏は、プログラム言語javascriptで行っています。演奏（音楽）とは関係のない話題になりますが、書き留めて置きます。
　とりあえず、演奏できればと思っていましたが、不都合な箇所の見直しをはじめました。

音源ファイルの音を出す２通りの方法
　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)