JK1MQZ
めー@トウキョウSR120/JK1MQZ
チャレンジ
【2】リリースまで非公開化
アイデア
思いつきメモなので実際に作るかは未定
【1】リリースまで非公開化
【2】横振りモールス練習ページの作成
モールス練習が出来るアプリやwebサービスがあるが、縦振り電鍵しか再現されてない
横振り(エレキー?)もあったら楽しいと思ったので作成
使用技術
Javascript / HTML
オーディオAPIでビープ音を発生
やってみた結果
スクイズ操作の再現で苦戦
ちょっとイマイチだったので投げちゃいました
雑なコードですがとりあえず貼り貼り
code:html
<body>
<span style="font-size:18px;">Press arrow key</span><p id="output"></p>
<script>
window.addEventListener('DOMContentLoaded', function(){
const ctx = new (window.AudioContext || window.webkitAudioContext)()
var key_input = new Array();
window.addEventListener("keydown", function(e){
e.preventDefault();
if( ! key_input.includes(e.key) ){
key_input.push(e.key);
}
});
window.addEventListener("keyup", function(e){
if( 0 < key_input.length ) {
console.log(key_input);
key_input = new Array();
}
});
setInterval(gen, 10);
var nect_check_time = Date.now();
function gen() {
if (nect_check_time > Date.now()){
return 0;
}
nect_check_time = Date.now();
if( key_input.includes('ArrowRight') && key_input.includes('ArrowLeft') ){
document.getElementById('output').innerHTML = '.-';
var osc = ctx.createOscillator()
osc.type = 'square'
osc.connect(ctx.destination)
// 音の発生
osc.start(ctx.currentTime)
// 音の停止
osc.stop(ctx.currentTime + 0.1)
var osc = ctx.createOscillator()
osc.type = 'square'
osc.connect(ctx.destination)
// 音の発生
osc.start(ctx.currentTime + 0.2)
// 音の停止
osc.stop(ctx.currentTime + 0.5)
nect_check_time = nect_check_time + 600;
return 0;
}
if( key_input.includes('ArrowLeft') ){
document.getElementById('output').innerHTML = '.';
var osc = ctx.createOscillator()
osc.type = 'square'
osc.connect(ctx.destination)
// 音の発生
osc.start(ctx.currentTime)
// 音の停止
osc.stop(ctx.currentTime + 0.1)
nect_check_time = nect_check_time + 200;
return 0;
}
if( key_input.includes('ArrowRight') ){
document.getElementById('output').innerHTML = '-';
var osc = ctx.createOscillator()
osc.type = 'square'
osc.connect(ctx.destination)
// 音の発生
osc.start(ctx.currentTime)
// 音の停止
osc.stop(ctx.currentTime + 0.3)
nect_check_time = nect_check_time + 400;
return 0;
}
}
});
</script>
</body>
成果物
ダウンロードしてブラウザで読み込んで下さい
キーボードの矢印キー ← → で短点と長点が出せます
音が出ます(音量注意)
https://gyazo.com/6c4e53bb3465d9ddf45ab1bf696385f2.png