Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » recargar archivo mp3 en html

JQuery - recargar archivo mp3 en html

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Oriol

recargar archivo mp3 en html

Publicado por Oriol (1 intervención) el 19/05/2017 10:03:36
Hola, buenas a todos. Tengo un problema con un proyecto (personal). Lo que quiero hacer es un juego de adivinar la cancion, son de series de tv. Lo tengo hecho de la manera siguiente:
-El usuario entra y en el body he puesto la etiqueta de HTML5:
<audio controls>
<source src="audios/XXXX.mp3" type="audio/mpeg" id="reproductor">
</audio>
- El usuario responde en un input text
-Al darle click en responder le envia lo escrito por jQuery y revisa el titulo de la cancion y lo escrito por el usuario, si concide, añade un punto al marcador (ahora sale un alert solo)
- El usuaio tiene una flecha que al hacer click lo que hace es enviar un jQuery que cambia el valor del src del source por otro (mediante Array), es aqui donde falla.

Si inspecciono el codigo veo que efectivamente el src del audio ha cambiado perfectamente, y si escribo el actual valor de este, me lo da correcto. Sin embargo el usuario en el reproductor sigue escuchando la 1a cancion...

¿Que puedo hacer para que el usuario escuche la cancion "dinamicamente"?
¿Se puede hacer tirando de jQuery o hay que meterse con... PHP?

HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="flechas">
           <div class="flecha-iz">
               <img src="img/fl-iz.png" alt="">
           </div>
           <div class="flecha-der">
               <img src="img/fl-der.png" alt="" onclick="cambiar()">
           </div>
       </div>
       <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>

CODIGO SCRIPT COLOCADO JUSTO ANTES DE /body
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
        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>

CODIGO QUE DA FUNCION AL BOTON SIGUIENTE Y AFIRMA SI ES CORRECTA O NO...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#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);
        }
    })
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de kip
Val: 141
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

recargar archivo mp3 en html

Publicado por kip (38 intervenciones) el 31/05/2017 00:43:12
Hola, ademas de cambiar el src, debes acceder a los metodos para que el elemento audio haga un reload interno del src que colocaste, aqui te dejo como podria quedar:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
    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() {
        var audio = $(".audio audio")[0];
        $("#reproductor").attr("src", cambia_audio[rand(10) - 1]);
        audio.pause();
        audio.load();
        audio.oncanplaythrough = audio.play();
    }
</script>

Pruebalo y nos cuentas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar