JavaScript虚拟钢琴音频播放异常问题求助

问题根源 #

你代码里所有<audio>标签的src属性存在语法错误，导致浏览器无法正确解析这些audio元素的ID，最终getElementById()返回null。

看你写的audio标签：

<audio id="C" src="notes/C.mp3'></audio>

这里src属性的双引号还没闭合，就多写了一个单引号，破坏了HTML属性的语法结构。浏览器解析时会把这个错误的引号当成属性值的一部分，导致audio元素的ID无法被正确识别。

修复方案 #

1. 修正HTML语法错误：把所有audio标签里多余的单引号去掉，修正后的audio标签格式如下：

<audio id="C" src="notes/C.mp3"></audio>
<audio id="Db" src="notes/Db.mp3"></audio>
<!-- 其他audio标签同理 -->

2. 可选优化：由于audio元素都在你创建的overlay容器内，直接从overlay中查询元素比全局查询更高效，还能避免全局ID冲突。修改playNote函数：

function playNote(key){
    console.log("Note:", key.dataset.note);
    const noteAudio = overlay.querySelector(`#${key.dataset.note}`);
    console.log("Audio element:", noteAudio);
    if (noteAudio) {
        noteAudio.currentTime = 0; // 点击时重置音频到开头，支持连续点击播放
        noteAudio.play();
    }
}

修正后的完整代码 #

function showPianoProdigyOverlay() {
    characterSpeed = 0;
    inOverlay = true;
    const overlay = document.createElement('div');
    overlay.className = 'overlay';
    overlay.innerHTML = `
        <div class="overlay-content">
            <div class="piano">
                <div data-note="C" class="key w"></div>
                <div data-note="Db" class="key b"></div>
                <div data-note="D" class="key w"></div>
                <div data-note="Eb" class="key b"></div>
                <div data-note="E" class="key w"></div>
                <div data-note="F" class="key w"></div>
                <div data-note="Gb" class="key b"></div>
                <div data-note="G" class="key w"></div>
                <div data-note="Ab" class="key b"></div>
                <div data-note="A" class="key w"></div>
                <div data-note="Bb" class="key b"></div>
                <div data-note="B" class="key w"></div>
            </div>

            <audio id="C" src="notes/C.mp3"></audio>
            <audio id="Db" src="notes/Db.mp3"></audio>
            <audio id="D" src="notes/D.mp3"></audio>
            <audio id="Eb" src="notes/Eb.mp3"></audio>
            <audio id="E" src="notes/E.mp3"></audio>
            <audio id="F" src="notes/F.mp3"></audio>
            <audio id="Gb" src="notes/Gb.mp3"></audio>
            <audio id="G" src="notes/G.mp3"></audio>
            <audio id="Ab" src="notes/Ab.mp3"></audio>
            <audio id="A" src="notes/A.mp3"></audio>
            <audio id="Bb" src="notes/Bb.mp3"></audio>
            <audio id="B" src="notes/B.mp3"></audio>
        </div>
    `;
    document.body.appendChild(overlay);

    const styleElement = document.createElement('style');
    styleElement.textContent = `
        *, *::before, *::after{
            box-sizing: border-box;
        }

        .overlay {
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
        }

        .overlay-content {
            background: white;
            padding: 20px;
            border-radius: 8px;
        }

        .piano {
            display: flex;
        }

        .key {
            height: calc(var(--width) * 4);
            width: var(--width);
            cursor: pointer;
        }

        .w {
            --width: 100px;
            background-color: white;
            border: 1px solid #333;
        }

        .b {
            --width: 60px;
            background-color: black;
            border: 1px solid #333;
            margin-left: calc(var(--width) / -2);
            margin-right: calc(var(--width) / -2);
            z-index: 2;
        }
    `;
    document.head.appendChild(styleElement);

    const keys = overlay.querySelectorAll('.key');

    console.log(keys);

    keys.forEach(key => {
        key.addEventListener('click', () => playNote(key))
    })

    function playNote(key){
        console.log("Note:", key.dataset.note);
        const noteAudio = overlay.querySelector(`#${key.dataset.note}`);
        console.log("Audio element:", noteAudio);
        if (noteAudio) {
            noteAudio.currentTime = 0; // 点击时重置音频到开头，支持连续点击播放
            noteAudio.play();
        }
    }
}

（注：额外给overlay加了固定定位和背景遮罩，让弹窗更合理；给琴键加了cursor指针；播放前重置音频时间，解决连续点击时音频不重新播放的问题）

内容的提问来源于stack exchange，提问作者Doma