aun soy novato estoy estudiando,
ayuda si se puede no entiendo quiero agregar 2 3 canciones al sitio yo escribi el codigo pero solo 1 cancion funciona como hacer que suenen todas las canciones pero no simultaneamente sino a su vez,
Por ejemplo estoy escuchando musica 1 y luego quiero escuchar play 2, cuando presiono play 2, play 1 deberia parar como hacerlo no entiendo me pueden ayudar de antemano gracias les dejo el codigo
var mySong = document.getElementById("mySong"); var icon = document.getElementById("icon"); icon.onclick = function() { if(mySong.paused){ mySong.play(); icon.src = "img/pause-icon.png"; }else{ mySong.pause(); icon.src = "img/play-icon.jpg"; } } <img src="img/play-icon.jpg" alt="" id="icon" width="80"> <audio id="mySong"> <source src="Ганвест - Кайфули.mp3" type="audio/mp3"> </audio> <img src="img/play-icon.jpg" alt="" id="icon" width="80"> <audio id="mySong"> <source src="Ганвест - Кайфули.mp3" type="audio/mp3"> </audio>Necesita identificaciones únicas o delegados, luego no necesita identificaciones en absoluto:
Tenga en cuenta que cambié la identificación del icono a la clase de icono, envolví cada canción en un div y todas las canciones también en un div
const icons = { play: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png", pause: "https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/play-pause.png" } const isPlaying = audioElement => !audioElement.paused; const container = document.getElementById("songs"); const songs = container.querySelectorAll(".song audio"); const controls = container.querySelectorAll(".song .icon"); container.addEventListener("click", function(e) { const tgt = e.target; if (tgt.matches(".icon")) { const mySong = tgt.closest(".song").querySelector("audio"); // pause all other songs songs.forEach((song,i) => { if (isPlaying(song) && song != mySong) { song.pause() controls[i].src=icons.play; } }); if (mySong.paused) { mySong.play(); tgt.src = icons.pause; } else { mySong.pause(); tgt.src = icons.play; } } }) <div id="songs"> <div class="song"> <img src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png" alt="Toggle" class="icon" width="80"> <audio id="mySong1"> <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mp3"></audio> </div> <div class="song"> <img src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-gallery/3.1.1/img/video-play.png" alt="Toggle" class="icon" width="80"> <audio id="mySong2"> <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3" type="audio/mp3"></audio> </div> </div>