如何在按键和onclick上激活音频标签

Question

I currently have a drum machine setup where it activates on keypress. 我目前有一个鼓机设置，可以在按键上激活它。 I want to make it where you can also activate the audio tags on click as well. 我要使其在您还可以点击激活音频标签的地方。

here is the html structure 这是html结构

<body>
    <div class="container">
        <div class="row">
            <div data-key="65" class="key" id="a" >
                <br/>A 
                <br/> Clap-808
            </div>
            <div data-key="83" class="key" id="s">
                <br/>S 
                <br/> Hihat-808
            </div>
            <div data-key="68" class="key" id="d">
                <br/>D 
                <br/> Kick-electro01
            </div>
            <div data-key="70" class="key" id="f">
                <br/>F 
                <br/> Snare-sumo
            </div>
        </div>
        <div class="row">
            <div data-key="74" class="key" id="j">
                <br/>J 
                <br/> Kick-deep
            </div>
            <div data-key="75" class="key" id="k">
                <br/>K 
                <br/> Perc-808
            </div>
            <div data-key="76" class="key" id="l">
                <br/>L 
                <br/> Openhat-808
            </div>
            <div data-key="186" class="key" id="semicolon">
                <br/>; 
                <br/> Snare-lofi01
            </div>
        </div>
        <div class="row">
            <div data-key="90" class="key" id="z">
                <br/>Z 
                <br/> Shaker-Shuffle
            </div>
            <div data-key="88" class="key" id="x">
                <br/>X 
                <br/> Snare-electro 
            </div>
            <div data-key="67" class="key" id="c">
                <br/>C 
                <br/> Tom-808 
            </div>
            <div data-key="86" class="key" id="v">
                <br/>V 
                <br/> Hihat-ring  
            </div>
        </div>
        <div class="row">
            <div data-key="77" class="key" id="m">
                <br/>M
                <br/>Kick-oldschool
            </div>
            <div data-key="188" class="key" id="comma">
                <br/>,
                <br/> Kick-slapback 
            </div>
            <div data-key="190" class="key" id="period">
                <br/>.
                <br/>Kick-newwave 
            </div>
            <div data-key="191" class="key" id="questionMark">
                <br/>?
                <br/>Kick-stomp
            </div>
        </div>
    </div> 

    <audio id="sAudio" data-key="65" src="sounds/clap-808.wav" ></audio>
    <audio src="./sounds/hihat-808.wav" data-key="83"></audio>
    <audio src="./sounds/kick-electro01.wav" data-key="68"></audio>
    <audio src="./sounds/snare-sumo.wav" data-key="70"></audio>

    <audio src="./sounds/kick-deep.wav" data-key="74"></audio>
    <audio src="./sounds/perc-808.wav" data-key="75"></audio>
    <audio src="./sounds/openhat-808.wav" data-key="76"></audio>
    <audio src="./sounds/kick-newwave.wav" data-key="186"></audio>

    <audio src="./sounds/shaker-shuffle.wav" data-key="90"></audio>
    <audio src="./sounds/snare-electro.wav" data-key="88"></audio>
    <audio src="./sounds/tom-808.wav" data-key="67"></audio>
    <audio src="./sounds/hihat-ring.wav" data-key="86"></audio>

    <audio src="./sounds/kick-oldschool.wav" data-key="77"></audio>
    <audio src="./sounds/kick-slapback.wav" data-key="188"></audio>
    <audio src="./sounds/kick-newwave.wav" data-key="190"></audio>
    <audio src="./sounds/kick-stomp.wav" data-key="191"></audio>

</body>
<script src='./javascript.js'></script>
</html>

Here is the javascript code. 这是JavaScript代码。 I want to make the code dry and not right out multiple onclicks for each individual id. 我想使代码干燥，而不是针对每个单独的ID进行多次onclicks处理。 Not quite sure the best way of doing that. 不确定这样做的最佳方法。

window.addEventListener('click',function(event){
    console.log(event);
    const audio = document.querySelector(`audio[data-key="${event}"]`)
    // const audio = document.querySelector(`#s`).innerHTML
    console.log(audio)
    // const key = document.querySelector(`.key[data-key="${event.keyCode}"]`)
    console.log(audio);
    if(!audio) return;
    audio.currentTime =0;
    audio.play();
    // key.classList.add('playing');
});

Answer 1

Try following code snippet might help you 尝试以下代码段可能对您有所帮助

 //music var audio = new Audio('http://www.sousound.com/music/healing/healing_01.mp3') checksound(); function checksound() { var myElement = document.getElementById("soundMenu"); myElement.innerHTML = "Turn Sound " + (audio.paused ? "OFF" : "ON"); if (audio.paused) { audio.play(); } else { audio.pause(); } } function myFunction() { var myElement = document.getElementById("soundMenu"); myElement.innerHTML = "Turn Sound " + (audio.paused ? "OFF" : "ON"); if (audio.paused) { audio.play(); } else { audio.pause(); } }

 <button id="soundMenu" onclick="checksound()">Play</button> <input type="text" onkeypress="myFunction()" />

如何在按键和onclick上激活音频标签

问题描述

1 个解决方案

解决方案1
0 2017-10-28 04:20:57

如何在按键和onclick上激活音频标签

问题描述

1 个解决方案

解决方案1 0 2017-10-28 04:20:57

解决方案1
0 2017-10-28 04:20:57