JSFiddle - React, Tailwind, and code Playground

by xxxwww

HTML

Доступные звуки: <span id="available"></span><br>
Пробел - остановить <br>
<img id="img" src="" alt="">

JavaScript

var audio = new Audio();

var keyEvents = {
	f: {
		image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Rana_esculenta_on_Nymphaea_edit.JPG/300px-Rana_esculenta_on_Nymphaea_edit.JPG',
		audio: 'https://www.freesound.org/data/previews/149/149092_2232619-lq.mp3'
	},
	d: {
		image: 'http://zhenskoe-mnenie.ru/upload/information_system_14/1/2/4/item_12475/information_items_12475.jpg',
		audio: 'https://www.freesound.org/data/previews/72/72579_422555-lq.mp3'
	}
}

document.addEventListener("keydown", keyPressHandler, false);
function keyPressHandler(e) {
	var key = e.key.toLowerCase();
	if (typeof keyEvents[key] === 'object') {
		var data = keyEvents[key];
		
		document.getElementById("img").src = data.image;
		
		audio.src = data.audio;
		audio.play();
	}
	if (key == ' ') {
		audio.pause();
		document.getElementById("img").src = '';
	}
}

document.getElementById('available').innerHTML = Object.keys(keyEvents)