Entonces, estoy tratando de hacer esto donde el usuario puede poner sonidos dentro de las imágenes. El usuario puede presionar un botón que reproduce un sonido y luego, después de presionar ese botón, hace clic en una imagen y luego la imagen ahora contiene ese sonido, convirtiéndolo en un nuevo botón de sonido. (Ilustrado con las imágenes a continuación, tenga en cuenta que las formas en la parte superior son áreas del mapa)
¿Cuál es la mejor manera de hacer esto? Un profesor me recomendó algunas líneas de código, pero no funcionó. Aquí hay una versión muy simplificada de mi código:
<div class="buttons"> <audio id="c1" src="notes/c1.wav" preload="auto"></audio> <button id="audio1" onclick="document.getElementById('c1').play();" data-file="notes/c1.wav" data-state>A1</button> </div> <div class="canvas"><img src="images\60.jpg" alt="image" usemap="#image-map" class="map"></div> <map name="image-map"> <area id="shape" alt="bbs" href="#" coords="638,310,999,565,807,784,485,541" shape="poly"></map> //this is the script he sent me <script> let audio_file= null let storage= sessionStorage document.querySelector('#audio1').addEventListener('click', evt => {audio_file = event.target.dataset.file}); document.querySelector('#shape').addEventListener('click', evt => {storage.setItem('shape', audio_file)}); </script>Básicamente, quiero que el usuario haga clic en el botón #C1 y luego haga clic en el área de #forma para que el archivo de audio en #C1 se almacene en #forma.
No tengo que usar el código del profesor, por lo que cualquier alternativa o sugerencia servirá. ¡Gracias!
Presione un botón que reproduzca un sonido y luego, después de presionar ese botón, haga clic en una imagen y luego la imagen ahora contiene ese sonido
let currentSound = null function trySound(e) { const isSoundChanging = currentSound != null if (isSoundChanging) { assignSound(e.target) } else { playSound(e.target.dataset.sound) } } function activateSound(audioID) { playSound(audioID) currentSound = audioID } function playSound(audioID) { const isValidID = (audioID ?? '').length > 1 if (!isValidID) return const audioElement = document.getElementById(audioID) audioElement.currentTime = 0; audioElement.play(); } function assignSound(image) { image.dataset.sound = currentSound playSound(currentSound) currentSound = null } button { all: unset; padding: .2em .5em; background-color: magenta; transition: transform 200ms; } button:hover, img:hover { transform: scale(1.05); cursor: pointer; } button:active, img:active { transform: scale(0.9); cursor: pointer; } <div class="buttons"> <audio id="c1" src="https://freesound.org/data/previews/209/209513_3916239-lq.mp3" preload="auto">Audio could not load</audio> <button id="audio1" onclick="activateSound('c1')">A1</button> <audio id="c2" src="https://freesound.org/data/previews/146/146058_529852-lq.mp3" preload="auto">Audio could not load</audio> <button id="audio1" onclick="activateSound('c2')">A2</button> </div> <img src="https://source.unsplash.com/random/100x100" width=100 height=100 alt="random image 1" onclick="trySound(event)" /> <img src="https://source.unsplash.com/random/101x101" width=101 height=101 alt="random image 2" onclick="trySound(event)" />