es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Reproduciendo audio en JavaScript desde una URL con variable.

12 Jul, 2023 Programación

Lo que estoy tratando de hacer es un input que reproduzca una canción cuando escribas su nombre.
Lo primero que intenté fue:

function myFunction() {
  var id = document.getElementById("myInput").value;
  var audio = 'https://bobzilla07.github.io/Music_Tap/' + id;
  var audio = new Audio(audio);
  audio.play();
}

con el código HTML de:

<input id="myInput" type="text">
<button onclick="myFunction()">play</button>

Lo cual no funcionó.

Luego pensé, ¿qué pasa si lo hago así?

function myFunction() {
  var id = document.getElementById("myInput").value;
  var audio = new Audio('https://bobzilla07.github.io/Music_Tap/' + id);
  audio.play();
}

Aún así, no funcionó. ¿Alguien tiene alguna idea de cómo arreglarlo para que funcione?

Edit: No soy bueno con JSON o incluso sé qué estoy haciendo, pero ¿habría alguna posibilidad de obtener la entrada del input HTML y ponerla en JSON para luego llamar al audio desde el enlace https://bobzilla07.github.io/Music_Tap/${song}.mp3`, donde${song}es la entrada delinput` HTML?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que estás intentando crear un campo de entrada que reproducirá una canción cuando el usuario ingrese el nombre de la canción. En tu código inicial, estás intentando crear un nuevo objeto de Audio y pasando una cadena ‘audio’ como argumento, lo cual es incorrecto.

    En tu segundo intento, te falta el paréntesis después del constructor de Audio, lo que también está causando un error.

    Para corregir tu código, intenta lo siguiente:

    function playSong() {
  var songName = document.getElementById("myInput").value;
  var audio = new Audio(`https://bobzilla07.github.io/Music_Tap/${songName}.mp3`);
  audio.play();
}

    Y en tu archivo HTML:

    <input id="myInput" type="text">
<button onclick="playSong()">reproducir</button>

    Este código debería funcionar y tomará la entrada del usuario del campo de entrada y reproducirá la canción correspondiente desde la URL que proporcionaste.

Comments are closed.