0

Quiero hacer un select y que al cliquear en cada opción reproduzca un audio.

<select>
        <option id="1"><audio src="audio1.mp3">audio1</audio></option>
        <option id="2"><audio src="audio2.mp3">audio2</audio></option>
        <option id="3"><audio src="audio3.mp3">audio3</audio></option>
    </select>

necesito hacer algo en JS o se puede hacer con HTML?

3
  • Con un maquetado html aparte. O sea, los selects son para alfanuméricos. Generalmente lo que veo en otros proyectos es generar un html que simule ser un select con el contenido que necesita (imágenes principalmente) y la lógica de selección lo hacen con un JS que se encarga de establecer los "selected" el 18 may. 2022 a las 15:48
  • Tu pregunta debe ser más específico. Que quieres con el Select ? Listar audios y reproducir ahi mismo ? O tener una lista Select de nombres de audios y al seleccionar reproducir ese audio en una etiqueta única de audio ? Que quieres hacer en realidad ? select es para listar números y textos, pero en este caso debe ser algo diferente para abrir una ventana de lista el 18 may. 2022 a las 16:01
  • muchas gracias!
    – MarcoXXX
    el 18 may. 2022 a las 17:15

2 respuestas 2

1

puedes hacerlo asi:

// url de ejemplo 
var url = "https://www.soundhelix.com/examples/mp3/SoundHelix-";
// agregamos un evento listener de tipo change al select
document.querySelector("select")
.addEventListener("change",function(e){
    // seleccionamos e.target = el elemento que genero el evento
    // del selected otenemos los options
    // de los options accedemos al indice seleccionado
    // y por ultimo recuperamos su texto osea el nombre
    let opt = e.target.options[e.target.selectedIndex].text;
    // seleccionamos el audio 
    let audio = document.querySelector("audio");
    // pausamos el anterior
    audio.pause();
    // concatenamos el url mas el nombre mas .mp3
    audio.src  = url + opt +".mp3";
    // le damos play 
    audio.play();
})
<select>
<option id="1">Song-1</option>
<option id="2">Song-2</option>
<option id="3">Song-3</option>
<option id="4">Song-4</option>
<option id="5">Song-5</option>
</select>

<audio src="audio1.mp3" controls>audio1</audio>

1
  • Muchas gracias!
    – MarcoXXX
    el 18 may. 2022 a las 17:14
1

En el ejemplo de

<button>play</button>

<audio class="sound1" src="https://hpr.dogphilosophy.net/test/wav.wav" ></audio>
<audio class="sound2" src="https://hpr.dogphilosophy.net/test/mp3.mp3" ></audio>

Necesitas usar .play() para iniciar el audio, y usar $(selector).get(0) para el objeto audio.

$('button').click(function(){
  if ( true ) {
    $('.sound1').get(0).play();
  } else {
    $('.sound2').get(0).play();
  }
});

Demo

1
  • muchas gracias!
    – MarcoXXX
    el 18 may. 2022 a las 17:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.