Question

我目前有一个鼓机设置，它可以在按键上激活。我想把它放在你也可以在点击时激活音频标签的地方。

这是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>

这是javascript代码。我想让代码变干，而不是为每个单独的id多个onclicks。不太确定这样做的最佳方式。

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

尝试以下代码段可能会对您有所帮助

＆＃13;

//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();
  }
}

＆＃13;

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

＆＃13;

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

1 个答案: