What I want to do is a game to guess the song, they are from TV series. I have it done in the following way:
-The user enters and in the body I have put the HTML5 tag:
<audio controls>
<source src="audios/XXXX.mp3" type="audio/mpeg" id="reproductor">
</audio>-
In a jQuery it reviews the title of the song and the written by the user, if it agrees, adds a point to the marker (now it leaves an alert only)
-
The user has an arrow that when clicking what he does is send a jQuery that changes the value of the src of the source for another one (by means of Array), this is where it fails.
If I inspect the code I see that the audio src has changed perfectly, and if I write the current value of this one, it is correct. However, the user in the player continues to listen to the 1st song ...
What can I do to make the user hear the song "dynamically"? Can you do it by pulling jQuery or do you have to mess with ... PHP?
- HTML -
<div class="audio">
<audio controls>
<source src="audios/hospital central.mp3" type="audio/mpeg" id="reproductor">
</audio>
</div>
<div class="respuesta">
<form action="#" id="form">
<input type="text" id="respuesta"> <br />
<button id="btn-resp">RESPONDER</button>
</form>
</div>
// script jquery before the body
function rand(n){
// creamos un numero al azar entre 1 y 10 (o cual sea la cantidad de imágenes)
return(Math.floor(Math.random() * n + 1 ));
}
//guardamos los audios en el array
var cambia_audio = new Array();
cambia_audio[0] = "audios/equipo a.mp3";
cambia_audio[1] = "audios/padre de familia.mp3";
cambia_audio[2] = "audios/hawaii 5-0.mp3";
cambia_audio[3] = "audios/el coche fantastico.mp3";
cambia_audio[4] = "audios/hospital central.mp3";
cambia_audio[5] = "audios/medico de familia.mp3";
cambia_audio[6] = "audios/los vigilantes de la playa.mp3";
cambia_audio[7] = "audios/oliver y benji.mp3";
cambia_audio[8] = "audios/el principe de bel air.mp3";
cambia_audio[9] = "audios/friends.mp3";
function cambiar(){
document.getElementById("reproductor").src = cambia_audio[rand(10)-1];
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>THE NEXT BUTTON:
$('#btn-resp').click(function(){
var respuesta = $('#respuesta').val();
//var correcta = "";
var aciertos_box = $('#aciertos').val();
var nombre_cancion = $("#reproductor").attr("src");
var contadorAciertos = 0;
var contadorFallos = 0;
var respuesta = 'audios/'+respuesta+'.mp3'; // Montamos estructura de carpeta y extension
if(respuesta == nombre_cancion) {
alert("acerto");
contadorAciertos++;
$("#aciertos").html(contadorAciertos);
}
else{
alert("fallo");
contadorFallos++;
$("#fallos").html(contadorFallos);
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>