ukulele彈奏模擬器v1.0（待完善）使用JS監聽鍵盤按下事件（keydown event） js控制html5 audio的暫停、播放、中止

時間 2019-12-13

標籤 ukulele 彈奏模擬器 v1.0 完善使用監聽鍵盤按下事件 keydown event 控制 html5 html audio 暫停播放中止欄目 JavaScript 简体版

原文原文鏈接

寫在前面

最近聽beyond樂隊的《灰色軌跡》聽上癮了，300多遍，震驚！！尤爲喜歡最後一分半鐘的吉他solo，真可謂吉他沒有酒，依然讓我醉如老狗。。javascript

翻了翻網上的視頻，瞬間以爲單身20年的手速都可望不可即~~css

默默拿起尤克里裏彈着兒歌《小星星》不由老淚縱橫。。我撅腚要學會首像樣的曲子！html

學什麼好呢？琢磨半天靈光一閃，《士兵突擊》中不是有段吉他彈奏的曲子，名字叫《前向きな乙女心》嗎？html5

當初說了「若是學吉他也會是由於這首曲子吧」，想不到一語成讖，那就從它開始吧！！java

上網搜關於這首曲的尤克里裏四線譜，找不到，淘寶問客服客服說老師尚未錄製關於這首的教學視頻。。git

我就聽，這首時長1分42秒，以爲並非很難，一邊聽一遍試，發現仍是很簡單的~~github

3 3 4 5 2 1 5 1 3 3 2 1 2 5 3編程

3 3 4 5 2 1 5 1 3 5 4 3 2 1 1小程序

到30秒後發現本身圖樣圖森破，手速太慢試不出來了。。微信小程序

怎麼辦呢？

第一個想到的是搜計算器，會發聲的計算器，微博看到有人用5個相同的計算器彈《名偵探柯南》主題曲~太機智了~可是搜了一圈，已經快十點了，好多店鋪客服都打卡下班了~

因而想網上有沒有模擬音階的軟件呢？有，可是好多都是鋼琴的，下載了一個貌似還帶病毒，買了佛冷。而且鋼琴和尤克里裏音色還不大同樣，就想能不能經過程序搞一些愉快的事情？

有人寫了關於鋼琴的程序，果真是一幫有理想的騷年，鋼琴88鍵都能作出來，我這1234567i豈不是小兒科啊，說幹就幹！

步驟分解

1.一邊彈一邊用手機錄音1234567i

沒錯，用手機。。音質差了點，不過聽了一遍還在能忍受的範圍。

2.音頻截取

1234567i，8段短音頻，每段大概2秒鐘的樣子，個別音長達4秒，不由感嘆這把琴的延音是真滴好，錢花哪哪值啊(￥2480 經費在燃燒.......)。

3.界面設計

界面兩個框，上面一個框實時顯示按鍵按下後的按鍵數值，下面框保留本身滿意的音階，clear按鈕用於快速清除框內值

框下面1234567i按鍵陣列，先這樣吧，醜是醜了點能用先。。

4.擼代碼

採用HTML5，根據按鍵值，讀取對應的音頻文件

5.哦了

(這裏有個問題, 播放按鍵因爲js沒法控制勻速, 播放暫時留了個bug, js如何實現sleep呢?歡迎留言)

置灰部分先忽略吧，搬完家抽時間再搞~

6.發佈微信小程序

下一步準備將程序遷移至微信小遊戲，以前是默認的「打飛機」，並未發佈。這下把這個程序發佈一下，手機上操做不是更方便嗎？

微信小程序是js寫，彷佛更簡單了~

按鍵圖片

按鍵對應音頻

編程，測試

發佈小程序

關鍵代碼

目錄結構

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>ukulele</title>
        <link rel="stylesheet" href="css/ukulele.css" />
        <script type="text/javascript" src="js/ukulele.js" ></script>
    </head>
    <body>
        <div align="center">
            <h1>ukulele彈奏模擬器v1.0</h1>
            <table>
                <tr>
                    <td align="right">
                        <textarea id="temp" class="textarea"></textarea>
                    </td>
                    <td align="left">
                        <input type="button" class="cls" onclick="resetTemp()" />
                    </td>
                </tr>
                <tr>
                    <td align="right">
                        <textarea id="replay" class="textarea"></textarea>
                    </td>
                    <td align="left">
                        <input type="button" class="cls" onclick="resetPlay()">
                        <input type="button" class="play" onclick="replay()" />
                    </td>
                </tr>
            </table>
        </div>
        <div align="center">
            <h1>Key(1=do 2=re 3=mi 4=fa 5=so 6=la 7=xi 0=i)</h1>
            <audio src="mp3/1do.mp3" id="do" controls="controls" hidden="hidden"></audio>
            <audio src="mp3/2re.mp3" id="re" controls="controls" hidden="hidden"></audio>
            <audio src="mp3/3mi.mp3" id="mi" controls="controls" hidden="hidden"></audio>
            <audio src="mp3/4fa.mp3" id="fa" controls="controls" hidden="hidden"></audio>
            <audio src="mp3/5so.mp3" id="so" controls="controls" hidden="hidden"></audio>
            <audio src="mp3/6la.mp3" id="la" controls="controls" hidden="hidden"></audio>
            <audio src="mp3/7xi.mp3" id="xi" controls="controls" hidden="hidden"></audio>
            <audio src="mp3/ido.mp3" id="ido" controls="controls" hidden="hidden"></audio>
            <input type="button" class="key" id="97" onclick="press()" style="background-image: url(img/1.png);" />
            <input type="button" class="key" id="98" onclick="press()" style="background-image: url(img/2.png);" />
            <input type="button" class="key" id="99" onclick="press()" style="background-image: url(img/3.png);" />
            <input type="button" class="key" id="100" onclick="press()" style="background-image: url(img/4.png);" />
            <input type="button" class="key" id="101" onclick="press()" style="background-image: url(img/5.png);" />
            <input type="button" class="key" id="102" onclick="press()" style="background-image: url(img/6.png);" />
            <input type="button" class="key" id="103" onclick="press()" style="background-image: url(img/7.png);" />
            <input type="button" class="key" id="96" onclick="press()" style="background-image: url(img/0.png);" />
        </div>
        <div align="center">
            <input type="button" class="demo" id="christmas" onclick="christmas()" style="background-image: url(img/christmas.png);" alt="聖誕歌"/>
            <input type="button" class="demo" id="star" onclick="star()" style="background-image: url(img/star.png);" alt="小星星"/>
            <input type="button" class="demo" id="bee" onclick="bee()" style="background-image: url(img/bee.png);" alt="小蜜蜂"/>
        </div>
    </body>
</html>

ukulele.js

function press(){
    var currentId = parseInt(event.currentTarget.id);
    ring(currentId);
    var yinjie = toYinjie(currentId);
    append(yinjie);
}

window.onkeydown = function(event){
    var keyCode = event.keyCode;
    ring(keyCode);
    var arr = [97,98,99,100,101,102,103,96,49,50,51,52,53,54,55,48];
    var boo = isInArray(arr, keyCode);
    if(boo){
        var yinjie = toYinjie(keyCode);
        append(yinjie);
    }
}

function ring(value){
    var targetId = toTargetId(value);
    var element = document.getElementById(targetId);
    keyDown(element);
}

function keyDown(element){
    if(element!=null){
        element.currentTime = 0;
        if(element.paused){
            element.play();
        }
    }
}

function resetTemp(){
    document.getElementById("temp").value = "";
}

function resetPlay(){
    document.getElementById("replay").value = "";
}

function append(value){
    document.getElementById("temp").value += value;
    document.getElementById("replay").value += value;
}

function replay(){
    var vals = document.getElementById("replay").value;
    // 自動演奏 間隔1s
    for(var i = 0; i < vals.length; i++){
        var v = vals.charAt(i);
        var keycode = toKeycode(v);
        async function test(){
          var temple=await sleep(1000);
          ring(parseInt(keycode));
          return temple;
        }
//                ring(parseInt(keycode));
    }
}

function sleep (time) {
    return new Promise((resolve) => setTimeout(resolve, time));
}

function isInArray(arr, value){
    for(var i = 0; i < arr.length; i++){
        if(value === arr[i]){
            return true;
        }
    }
    return false;
}

function toKeycode(value){
    var keycode = null;
    switch(value){
        case "1":
            keycode = "97";
            break;
        case "2":
            keycode = "98";
            break;
        case "3":
            keycode = "99";
            break;
        case "4":
            keycode = "100";
            break;
        case "5":
            keycode = "101";
            break;
        case "6":
            keycode = "102";
            break;
        case "7":
            keycode = "103";
            break;
        case "i":
            keycode = "96";
            break;
    }
    return keycode;
}

function toYinjie(value){
    var yinjie = null;
    switch(value){
        case 49:
        case 97:
            yinjie = "1";
            break;
        case 50:
        case 98:
            yinjie = "2";
            break;
        case 51:
        case 99:
            yinjie = "3";
            break;
        case 52:
        case 100:
            yinjie = "4";
            break;
        case 53:
        case 101:
            yinjie = "5";
            break;
        case 54:
        case 102:
            yinjie = "6";
            break;
        case 55:
        case 103:
            yinjie = "7";
            break;
        case 48:
        case 96:
            yinjie = "i";
            break;
    }
    return yinjie;
}

function toTargetId(value){
    var targetId = null;
    switch(value){
        case 49:
        case 97:
            targetId = "do";
            break;
        case 50:
        case 98:
            targetId = "re";
            break;
        case 51:
        case 99:
            targetId = "mi";
            break;
        case 52:
        case 100:
            targetId = "fa";
            break;
        case 53:
        case 101:
            targetId = "so";
            break;
        case 54:
        case 102:
            targetId = "la";
            break;
        case 55:
        case 103:
            targetId = "xi";
            break;
        case 48:
        case 96:
            targetId = "ido";
            break;
    }
    return targetId;
}

// 聖誕歌
function christmas(){
    
}
// 小星星
function star(){
    
}
// 小蜜蜂
function bee(){
    
}

ukulele.css

h1{
    color: blueviolet;
}
.textarea {
    width: 650px;
    height: 250px;
    background: rgba(255, 255, 255, 0);
    font-family: "arial, helvetica, sans-serif";
    font-size: 48px;
    color: purple;
    border-color: pink;
}
.key{
    width:100px;
    height:100px;
    background-size: 100% 100%;
    border-radius: 50px;
    background-color: pink;
    outline: none;
}
.cls , .play{
    width: 86px;
    height: 86px;
    border-radius: 5px;
    background-color: deepskyblue;
    outline: none;
}
.cls{
    background-image: url(../img/del.png);
}
.play{
    background-image: url(../img/play.png);
}
.demo{
    width: 130px;
    height: 100px;
    border-radius: 20px;
    background-color: pink;
    outline: none;
}
body {
    background-image: url(../img/bg.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}