Javascript com problema para tocar musica

DaanLOST · 26 de agosto de 2016

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>

DiF · 26 de agosto de 2016

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

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

DaanLOST · 27 de agosto de 2016

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

DiF · 27 de agosto de 2016

@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!