Question

我在按下或单击按钮时播放音频有问题。

我的音频好像有延迟，但我放了一个 audio.currentTime = 0，所以我不知道发生了什么。

这是我的 JS：

const $ = document.querySelectorAll.bind(document);

const sounds = [
    {id:'Bass Drum', letter:'Q', src:'https://dight310.byu.edu/media/audio/FreeLoops.com/3/3/Free%20Kick%20Sample%2011-909-Free-Loops.com.mp3'}
];
let volumeVal = 0.5;

$('input[type=range]')[0].addEventListener('input', function(e) {
    volumeVal = e.target.value / 100;
});

function main(url, name) {
    const audio = new Audio(url);
    audio.currentTime = 0;
    audio.preload = "auto";
    audio.volume = parseFloat(volumeVal);
    audio.play();
    $('.name')[0].textContent = name;
}

window.onkeydown = function(e) {
    function seter(id) {
        setTimeout(() => {
            $(`.${id}-but`)[0].classList.add('pressed');
            setTimeout(() => {
                $(`.${id}-but`)[0].classList.remove('pressed');
            }, 140);
        }, 0);
    }
    switch(e.key) {
        case 'q':
            main(sounds[0].src, sounds[0].id);
            seter('q');
        break;
    }
}

$('.q-but')[0].addEventListener('click', () => {
    main(sounds[0].src, sounds[0].id);
});

Answer 1

首先，非常感谢@Seblor 为我提供解决方案。

我通过为每个声音创建音频节点解决了我的问题：

<audio id="bass" preload="auto" src="https://dight310.byu.edu/media/audio/FreeLoops.com/3/3/Free%20Kick%20Sample%2011-909-Free-Loops.com.mp3"></audio>

在我的 JS 文件中，我为每个按钮添加了这个事件监听器：

$('.q-but')[0].addEventListener('click', () => {
    const audio = $("#bass")[0];
    audio.currentTime = 0;
    audio.play();
});

当然，现在我可以减少我的代码重复性，因为我对所有 9 个按钮都这样做了。最终我会的。

音频在播放时有奇怪的行为

1 个答案: