使用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多次播放聲音文件（第一次播放完畢之前）？

回答

相關問題