I work on a script that intercepts pressing the buttons of the keyboard and instead of their values ​​displays the desired images on the screen. Tell me, please, how can I make the output of each image accompanied by the playback of a certain corresponding sound file? Those. I click, for example, on "Q", I see a picture on the screen and at the same time I hear a sound on the background, then I press W, I see another picture and another sound? Add. libraries would not like to use, if possible, only pure JS.

PS This is necessary for scientific work, and not for the terror of users of any site with different sounds :) I spent several hours in Google, but since I am not well versed in this topic, I could not adapt the existing examples to fit my case Help me please!

function keyEvent(){ var imgSrc = null; var container = document.getElementById( 'storage' ); switch(event.keyCode){ case 81: { imgSrc="http://posudoria.ru/parlament/2.jpg"; break; } // "Q" case 87: { imgSrc="http://posudoria.ru/parlament/3.jpg"; break; } // "W" case 69: { imgSrc="http://posudoria.ru/parlament/4.jpg"; break; } // "E" case 82: { imgSrc="http://posudoria.ru/parlament/5.jpg"; break; } // "R" case 84: { imgSrc="http://posudoria.ru/parlament/6.jpg"; break; } // "T" case 89: { imgSrc="http://posudoria.ru/parlament/7.jpg"; break; } // "Y" case 13: { if (container.lastElementChild.childElementCount) { var line = document.createElement("div"); line.className = 'line'; container.appendChild( line ); } break; } case 8: { event.preventDefault(); if(container.childElementCount) { if (!container.lastElementChild.childElementCount) { container.removeChild(container.lastElementChild); } container.lastElementChild.removeChild(container.lastElementChild.lastElementChild); } } } if( imgSrc == null ) return; var img = document.createElement('img'), div = document.createElement('div'); img.setAttribute("src", imgSrc); div.className = 'container'; div.appendChild( img ); if (!container.childElementCount) { var line = document.createElement("div"); line.className = 'line'; container.appendChild(line); } container.lastElementChild.appendChild( div ); } document.body.onkeydown = keyEvent;

    1 answer 1

    You can play the sound on the page using the audio tag in the DOM or the Audio object in javascript (in fact, it’s the same thing). If you look a little wider, you can use all the power of the Web Audio API . But for your purposes, the Audio object and its play method will suffice.

    This requires data that HTMLAudioElement can interpret as sound. In your case, you will only need to find suitable sound files, place them on your server, and refer to them about creating an audio object.

    To do this, it is enough to write a construction in the js-code:

     var audio = new Audio('<url>'); audio.play();

    At the same time, the file will be loaded, and immediately after that it is lost. An example .

    To play a sound by pressing a key, you need to put this construction in a keystroke handler.

    It should be noted that if you simply put such a structure in a handler, then we will encounter two important consequences:

    1. When you first press a key with def. sound, this sound will play with some delay after pressing, because the file will need to be downloaded from somewhere.
    2. Each time a key is pressed, an Audio object will be created, which can lead to a lot of memory and lags.

    For optimization, it is worth loading resources before the user can use them. For example, before starting a game, you can create a list of Audio objects by placing them in a queue for download. To check the status of the download, you need to subscribe to the canplaythrough event. An example .

    Another way would be to put the entire set of audio files as audio tags into the DOM page initially. In this case, to cache them, you need to find them using one of the methods , set the event handler for the canplaythrough event and call the load method on them.

    This also applies to pictures. It is necessary to load them all in advance, if possible.

    Free sound sets can be found at https://www.freesound.org .

    • Thank you so much! Everything worked out. - Josik