So, I'm trying to do this thing where the user can put sounds inside images. The user can press a button that plays a sound and then after pressing that button they click on an image and then the image now contains that sound, making it a new sound button. (Illustrated with the images below, take note the shapes on top are map areas)
What's the best way to go about this? A professor recommended me some lines of code, but it didn't work. Here's a very simplified version of my code:
<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>
Basically, I want the user to click the #C1 button and then click the #shape area so the audio file in #C1 will be stored in #shape.
I don't have to use the professor's code, so any alternative or suggestion will do. Thanks!
Press a button that plays a sound and then after pressing that button click on an image and then the image now contains that sound
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)" />