ukulele弹奏模拟器v1.0（待完善）

写在前面

最近听beyond乐队的《灰色轨迹》听上瘾了，300多遍，震惊！！尤其喜欢最后一分半钟的吉他solo，真可谓吉他没有酒，依然让我醉如老狗。。

翻了翻网上的视频，瞬间觉得单身20年的手速都望尘莫及~~

默默拿起尤克里里弹着儿歌《小星星》不禁老泪纵横。。我撅腚要学会首像样的曲子！

学什么好呢？琢磨半天灵光一闪，《士兵突击》中不是有段吉他弹奏的曲子，名字叫《前向きな乙女心》吗？

当初说了“如果学吉他也会是因为这首曲子吧”，想不到一语成谶，那就从它开始吧！！

上网搜关于这首曲的尤克里里四线谱，找不到，淘宝问客服客服说老师还没有录制关于这首的教学视频。。

我就听，这首时长1分42秒，觉得并不是很难，一边听一遍试，发现还是很简单的~~

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;
}

代码已分别上传至github，喜欢的园友可以戳戳

简单感受一下~

https://xiguanchendian.github.io/ukulele/

以下是微信小程序识别码，欢迎试玩鸭~