Ir ao conteúdo
  • Cadastre-se
DaanLOST

RESOLVIDO Javascript com problema para tocar musica

Recommended Posts

Boa noite, estou com dificuldades em fazer funcionar o botao de musica Play de um pagina que estou tentando fazer,

o botão está dentro de um form e por isso nao funciona, tirando ele do form funciona tranquilo, mas preciso do botao neste lugar

alguem tem alguma ideia de como posso resolver?

segue o codigo da pagina

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <link rel="stylesheet" href="css/style.css"/>
        <title>Fenecad</title>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/jquery-1.11.3.min.js"></script>
        <script src="js/jquery-migrate-1.2.1.min.js"></script>
        <link rel="shortcut icon" href="favicon.ico" >

        <script type="text/javascript">
            //checar numero de checkbox
            var CheckMaximo = 2;
            
            function verificar() {
                var Marcados = 1;
                var objCheck = document.forms['form1'].elements['checkbox'];

//Percorrendo os checks para ver quantos foram selecionados:
                for (var iLoop = 0; iLoop < objCheck.length; iLoop++) {
//Se o número máximo de checkboxes ainda não tiver sido atingido, continua a verificação:
                    if (objCheck[iLoop].checked) {
                        Marcados++;
                    }

                    if (Marcados <= CheckMaximo) {
                        //Habilitando todos os checkboxes, pois o máximo ainda não foi alcançado.
                        for (var i = 0; i < objCheck.length; i++) {
                            objCheck[i].disabled = false;
                        }
                        //Caso contrário, desabilitar o checkbox;
                        //Nesse caso, é necessário percorrer todas as opções novamente, desabilitando as não checadas;

                    } else {
                        for (var i = 0; i < objCheck.length; i++) {
                            if (objCheck[i].checked == false) {
                                objCheck[i].disabled = true;
                            }
                        }
                    }
                }
            }
            
            $(document).on("ready", function () {
                $('#enviar').click(function () {
                    alert($('#checkbox1').is(':checked'));
                    alert($('#checkbox2').is(':checked'));
                    alert($('#checkbox3').is(':checked'));
                });
            });


        </script>

    </head>

    <body>
        <div id="interface">    

            <header>    
                <h1><img src="img/fenecad.PNG" id="logo"/></h1> 
            </header>                
            <div id="corpo">    
                <h2><b>  Playlist banda Trevoáh</b> </h2>
                <div id="esquerdo">

                    <div id="balao">  
                        
                        <form name="form1">
                        <input type="checkbox" name="checkbox" id="checkbox1"  onclick="verificar()" />
                        <label for="checkbox1"><h3>Trevoáh - Me Encontre Por Aí</h3></label></td><td>
                            <audio  id="demo" src="mp3/me_encontre_por_ai.mp3"></audio>
                            <button id="stop" onclick="document.form1.getElementById('demo').load()">Stop</button>
                            <button id="play" onclick="document.form1.getElementById('demo').play()">Play</button>
                            
                            <h5><a href="https://www.youtube.com/watch?v=Vx0j66gi_e4" target="_blank">Assistir o video clipe no Youtube</a> </h5>
                    </div>

                    <div id="balao">  
                        <input type="checkbox" name="checkbox" id="checkbox2"  onclick="verificar()"  />
                        <label for="checkbox2"><h3>Trevoáh - Me Encontre Por Aí</h3></label></td><td>
                           
                            <button id="stop" onclick="document.getElementById('demo').load()">Stop</button>
                            <button id="play" onclick="document.getElementById('demo').play()">Play</button>
                            <audio id="demo" src="mp3/me_encontre_por_ai.mp3"></audio>
                            <h5>  www.youtube.com </h5>
                    </div>
                    <div id="balao">  
                        <input type="checkbox" name="checkbox" id="checkbox3"  onclick="verificar()" />
                        <label for="checkbox3"><h3>Trevoáh - Me Encontre Por Aí</h3></label></td><td>
                            <button id="stop" onclick="document.getElementById('demo').load()">Stop</button>
                            <button id="play" onclick="document.getElementById('demo').play()">Play</button>
                            <audio id="demo" src="mp3/me_encontre_por_ai.mp3"></audio>
                            <h5>  www.youtube.com </h5>
                            </form>
                        
                    </div>
                    <input type="button" id="enviar" value="enviar" />
                </div>
                <div id="direito">

                    <img id="logoBanda" src="img/logo.jpg" />
                    <img id="imgBanda" src="img/banda.png" />



                </div>


                <footer>
                    2016
                </footer>  
            </div>  
        </div>    
    </body>
</html>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DaanLOST Já tentou fazer pelo jQuery sem ser inline?

 

$("#play").on("click", function(){
    $("#demo").play()
});

 

Compartilhar este post


Link para o post
Compartilhar em outros sites
42 minutos atrás, dif disse:

@DaanLOST Já tentou fazer pelo jQuery sem ser inline?

 


$("#play").on("click", function(){
    $("#demo").play()
});

 

Nao consegui, quando clico em play a pagina atualiza e não toca a musica. igual com o codigo anterior

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DaanLOST Dei uma analisada mais profunda no seu código. Há erros ali.

1)Você está usando ID onde outro elemento também está usando a mesma ID. Nesse caso deve-se usar "class". O id "#" é uma identificação única e só aquele elemento pode ter. Já o class é aceito mais de um  e com o mesmo nome. você aplica isto quando quer que todos os elementos tenham a mesma regra. 

 

2) O motivo porque os <button> não funcionam dentro do <form> é porque não foi especificado o tipo de elemento que ele espera ser.

Nesse caso, basta adicionar em todos seus buttons de play e stop o atributo: type="button"

Assim vai permitir que chame o evento onlick que você colocou ali. 

Particularmente eu retiraria o código inline e colocaria junto com os demais códigos javascript.

No caso você pode atribuir o evento de click através da função on() e um laço de each() para varrer os elementos de audio. 

 

Ficando assim:

$(document).ready(function(){
 
 //evento para tocar a musica atual
 $('.play').on('click', function() {
    $('audio').each(function(){
        this.pause();
        this.currentTime = 0;
    });
    $('#' + $(this).data('audio-id')).get(0).play();
});
 
 //evento para parar a musica atual
 $(".stop").on("click",function(){
 		$('audio').each(function(){
        this.pause();
    });
    $('#' + $(this).data('audio-id')).get(0).load();
 });

});

Basicamente digo que:

Quando o documento estiver pronto terá dois eventos.  play e stop.

NO evento de play:

Pegamos o elemento class do botão e atribuímos para a função on(). Esta função por sua vez, recebe dois parâmetros.

A ação e uma função vazia.

Dentro dessa função on(), pegamos o elemento de audio $('audio') e atribuímos a uma função chamada each(). Nesse caso ela recebe como parâmetro uma função vazia.

Dentro desta função  informamos que cada audio será pausado com this.pause()  e zerando o tempo com this.currentTime.

Fora desta função each(). usamos o seletor concatenado com o valor atual a partir de um data-attribute atribuído para cada botão de play e igualmente atribuído uma ID para cada audio.

 

Então, o botão de play do primeiro áudio dizemos que ele terá o data-attribute:   data-audio-id="audio-1"

Logo,  o elemento <audio> contendo o src do audio1 terá o id:   id="audio-1"

 

Isso permite que esta linha funcione: $('#' + $(this).data('audio-id')).get(0).play();

Onde: o # é o identificador concatenado com o data-audio-id que é audio-1

Para que toque a musica, é preciso usar o get(0).

 

O evento do stop é exatamente igual ao play só que não precisa zerar o tempo do audio porque você já faz isso ao clicar no play.

 

Veja o exemplo do seu código funcionando no JSFiddle: https://jsfiddle.net/e6hLL0j3/

 

PS: Preste a atenção na estrutura html do exemplo, contém correções de semântica 

 

Seguindo este passos, SEM COPIAR e COLAR, mas sim estudando o que foi feito e explicado linha a linha você vai conseguir fazer o que deseja!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×