¡No soy un programador! De todos modos; Estoy trabajando en una aplicación de diccionario, necesito que el usuario pueda escuchar la palabra cuando haga clic (o haga clic en un pequeño botón al lado). Cada palabra está en su propia etiqueta p. Mi enfoque fue darle a la etiqueta p una identificación igual a la palabra, por lo que para la palabra manzana, la identificación p será id="manzana", y el nombre del archivo mp3 es "manzana.mp3". Necesito una secuencia de comandos general (para toda la página) que tome la identificación del elemento en el que se hizo clic y la inserte en una función html interna incrustada que incruste una etiqueta de audio con src="the clicked id.mp3" y reprodúzcala. Aquí lo que estaba intentando, pero obviamente me falta la sintaxis correcta
<!DOCTYPE html> <html> <head> <title>Get ID of Clicked Element using JavaScript</title> </head> <body> <button id='cat' >cat</button> <button id='dog' >dog</button> <script> document.addEventListener('click', function(e) { alert(e.target.id); }); function playSound(soundfile) { document.getElementById("the grapped Id").innerHTML= "<embed src= the grapped id""+soundfile+"\" hidden=\"false\" autostart=\"true\" loop=\"false\" />"; } </script> </body> </html>Algunas notas:
id , use data-* como un atributo más adecuado para tales tareas.Audio() . <!DOCTYPE html> <html> <head> <title>Click a word to listen it</title> </head> <body> <p data-sound="cat">cat</p> <p data-sound="dog">dog</p> <script> var sounds = {}; function loadSound(name) { if (sounds[name]) { return sounds[name]; } var file = '/sounds/' + name + '.mp3', sound = new Audio(file); sound.onerror = function() { alert('File not found: ' + file); }; sound.onloadedmetadata = function() { sounds[name] = sound; }; return sound; } function playSound(name) { var sound = loadSound(name); if (sound.currentTime > 0) { sound.pause(); sound.currentTime = 0; } sound.play(); } document.addEventListener('click', function(e) { if (e.target.dataset && e.target.dataset.sound) { playSound(e.target.dataset.sound); } }); </script> </body> </html>