使用JavaScript多次播放声音文件（第一次播放完毕之前）？

我正在编写一个教程来改进我的JavaScript。我需要制作一个'鼓组'，按键可以发出声音。使用JavaScript多次播放声音文件（第一次播放完毕之前）？

我有一个代码笔在这里，虽然它没有完全工作，我不能引用音频文件：https://codepen.io/anon/pen/vmzjPy

Ive得到了，如果你轻点按键慢慢地工作。但是，如果您快速点击相同的键，则声音不会播放多次，直到第一个实例播放完毕。

<div class="keys"> 
    <div data-key="65" class="key"> 
     <kbd>A</kbd> 
     <span class="sound">clap</span> 
    </div> 
    <div data-key="83" class="key"> 
     <kbd>S</kbd> 
     <span class="sound">hihat</span> 
    </div> 
    <div data-key="68" class="key"> 
     <kbd>D</kbd> 
     <span class="sound">kick</span> 
    </div> 
    <div data-key="70" class="key"> 
     <kbd>F</kbd> 
     <span class="sound">openhat</span> 
    </div> 
    <div data-key="71" class="key"> 
     <kbd>G</kbd> 
     <span class="sound">boom</span> 
    </div> 
    <div data-key="72" class="key"> 
     <kbd>H</kbd> 
     <span class="sound">ride</span> 
    </div> 
    <div data-key="74" class="key"> 
     <kbd>J</kbd> 
     <span class="sound">snare</span> 
    </div> 
    <div data-key="75" class="key"> 
     <kbd>K</kbd> 
     <span class="sound">tom</span> 
    </div> 
    <div data-key="76" class="key"> 
     <kbd>L</kbd> 
     <span class="sound">tink</span> 
    </div> 
    </div> 

    <audio data-key="65" src="sounds/clap.wav"></audio> 
    <audio data-key="83" src="sounds/hihat.wav"></audio> 
    <audio data-key="68" src="sounds/kick.wav"></audio> 
    <audio data-key="70" src="sounds/openhat.wav"></audio> 
    <audio data-key="71" src="sounds/boom.wav"></audio> 
    <audio data-key="72" src="sounds/ride.wav"></audio> 
    <audio data-key="74" src="sounds/snare.wav"></audio> 
    <audio data-key="75" src="sounds/tom.wav"></audio> 
    <audio data-key="76" src="sounds/tink.wav"></audio> 

<script> 

    'use strict'; 

    const keyElems = document.getElementsByClassName('key'); 
    const soundElems = document.getElementsByTagName('audio'); 

    const highlight = function(elem) { 
    elem.classList.add('playing'); 
    setTimeout(function(){ 
     elem.classList.remove('playing'); 
    }, 300); 
    } 

    const makeSound = function(val){ 
    for (const soundsElem of soundElems) { 
     const soundsElemVal = soundsElem.getAttribute('data-key'); 
     if (val === soundsElemVal) { 
     soundsElem.play(); 
     } 
    } 
    } 

    const keyPressedSoundVal = function(obj) { 
    //console.log('keyPressedSoundVal'); 
    const keyPressed = obj.key; 
    for (const keyElem of keyElems) { 
     const val = keyElem.getElementsByTagName('kbd')[0].textContent.toLowerCase(); 
     if (keyPressed === val) { 
     highlight(keyElem); 
     const val = keyElem.getAttribute('data-key'); 
     makeSound(val); 
     } 
    } 
    } 

    document.addEventListener("keypress", keyPressedSoundVal); 

</script>

来源

2017-05-18 Evans

可能是因为'makeSound'只是调用相应的音频元素'play'方法。元素仍在播放时调用它不起作用 - 请参阅https://www.w3.org/TR/html5/embedded-content-0.html#playing-the-media-resource - 如果要有效播放声音并行地看看Web Audio API。 –

@le_m是正确的，如果您正在制作鼓套件，请使用WebAudio API，媒体元素不适用于此目的。你可以在[这个Q/A]中找到一个实现（http://stackoverflow.com/questions/30433667/cloning-audio-source-without-having-to-download-it-again/30440830#30440830）。 – Kaiido

音频元素不会再次发挥，直到他们已经播放完毕，因此该解决方案是你开始玩之前倒带音频元素：

soundsElem.currentTime = 0; 
soundsElem.play();

来源

2017-05-18 02:56:41 Evans

使用JavaScript多次播放声音文件（第一次播放完毕之前）？

回答

相关问题