web audio api实现在线录制按键弹奏音乐效果代码-html代码-BFW代码库

代码语言：html

所属分类：多媒体

代码描述：web audio api实现在线录制按键弹奏音乐效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-image: linear-gradient(to left bottom, #d87a00, #f46246, #fa557c, #e75eaf, #bc74d7, #9487eb, #6197f4, #00a3f3, #00afed, #00b9e0, #00c0cf, #2ac6bc);

    /* 指定背景图像的大小 */
    background-size: 200%;
    /* 执行动画：动画名 时长 线性的 无限次播放 */
    animation: bgAnimation 10s linear infinite;
}

/* 定义动画 */
@keyframes bgAnimation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.box {
    position: relative;
    border-radius: 10px;
    background-color: #ffffffa6;
}

.keys {
    position: relative;
    display: grid;
    margin: 0 auto;
}

.key {
    display: inline-block;
    background-color: #ffffff93;
    margin: 5px;
    border-radius: 10px;
    background-repeat: 5px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
}

.active {
    background-color: #000;
    color: #FFF;
}

.container {
    position: relative;
    margin: 0 auto;
    text-align: center;
    border-radius: 5px;
    background-color: #ffffff93;
}

button {
    display: inline-block;
    background-color: #242424;
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    transform: translateY(1px);
    background-color: #000;
}

button:disabled {
    background-color: #c3c3c3;
    cursor: not-allowed;
}

.container p {
    position: absolute;
    right: 2px;
    bottom: 2px;
}

/* 超小屏幕（手机,小于768px） */
@media screen and (max-width:767px) {
    .keys {
        width: 320px;
        height: 240px;
        grid-template-columns: repeat(4, 80px);
        grid-auto-rows: 80px;
    }

    .key {
        width: 70px;
        height: 70px;
        font-size: 20px;
    }

    .container {
        width: 340px;
    }

    button {
        padding: 6px 12px;
        font-size: 16px;
        margin: 20px 8px 30px 8px;
    }
}

/* 小屏幕（平板,大于等于768px） */
@media screen and (min-width:768px) {
    .keys {
        width: 660px;
        height: 220px;
        grid-template-columns: repeat(6, 110px);
        grid-auto-rows: 110px;
    }

    .key {
        width: 100px;
        height: 100px;
        font-size: 20px;
    }

    .container {
        width: 700px;
    }

    button {
        padding: 14px 34px;
        font-size: 20px;
        margin: 20px 30px 40px 30px;
    }
}

/* 中等屏幕（桌面显示器,大于等于992px） */
@media screen and (min-width:992px) {
    .keys {
        width: 960px;
        height: 80px;
        grid-template-columns: repeat(12, 80px);
        grid-auto-rows: 80px;
    }

    .key {
        width: 70px;
        height: 70px;
        font-size: 20px;
    }

    .container {
        width: 980px;
    }

    button {
        padding: 10px 30px;
        font-size: 20px;
        margin: 20px 30px;
    }
}

/* 大屏幕（大桌面显示器,大于等于1200px） */
@media screen and (min-width:1200px) {
    .keys {
        width: 960px;
        height: 80px;
        grid-template-columns: repeat(12, 80px);
        grid-auto-rows: 80px;
    }

    .key {
        width: 70px;
        height: 70px;
        font-size: 20px;
    }

    .container {
        width: 980px;
    }

    button {
        padding: 10px 30px;
        font-size: 20px;
        margin: 20px 30px;
    }
}
    </style>

</head>

<body>
    <div class="box">
        <div class="keys">
            <div class="key" data-note="C">Q</div>
            <div class="key" data-note="C#">W</div>
            <div class="key" data-note="D">E</div>
            <div class="key" data-note="D#">R</div>
            <div class="key" data-note="E">T</div>
            <div class="key" data-note="F">Y</div>
            <div class="key" data-note="F#">U</div>
            <div class="key" data-note="G">I</div>
            <div class="key" data-note="G#">O</div>
            <div class="key" data-note="A">P</div>
            <div class="key" data-note="A#">[</div>
            <div class="key" data-note="B">]</div>
        </div>
        <div class="container">
            <button id="recordButton">录制</button>
            <button id="stopButton" disabled>暂停</button>
            <button id="playButton" disabled>播放</button>
            <button id="clearButton" disabled>清空</button>
            <p>记得键盘切换到小写</p>
        </div>
    </div>
    <script>
        

// let onClick = new Audio('');
// 可添加停止录制提醒
// let offClick = new Audio('');
let audioContext = new (window.AudioContext || window.AudioContext)();
let krys = document.querySelectorAll('.key');
let volume = 0.2;
let activekeys = {};
let chunks = [];
let mediaRecorder;
let.........完整代码请登录后点击上方下载按钮下载查看