0

Estou tentando fazer um player, e não posso usar ícones, tenho que fazer tudo em uma página só, não estou conseguindo mudar o texto do botão para Pause quando o áudio esta sendo executado e Play quando o áudio está pausado, oque eu tentei foi isso mais não deu certo `videoElement.pause();

            playButton.querySelector('span').className = "btPlay".innerHTML("Pause");`
` videoElement.play();
            playButton.querySelector('span').className = "btPause".innerHTML("Pause");`

O que estou fazendo de errado ? aqui está o js completo e a parte do html que se refere aos botão

quando eu atualizo a página ele toca normalmente, ai eu aperto pause ele pausea normalmente, e mostra o botão de play só que ai eu aperto play ele não mostra o botão de pause e aparece esses dois erros linhas dos errosnome do erro

    var player, drag;
var audioElement, playButton, slider, audioButton, icoAudio;
function selectPlayer(elem){
    if( player != elem ){ 
        player = elem;
    }
    audioElement   = player.querySelector('audio'); //Objeto do player
    playButton     = player.querySelector('.play'); //Botão play e pause
    slider         = player.querySelector('.slider'); 
    sliderVol      = slider.querySelector('.bar');
    audioButton    = player.querySelector('.audio');
    //Ações do mouse
    playButton.addEventListener('click', playAudio);
    slider.addEventListener('mousedown', startDrag);
    slider.addEventListener('mousemove', showVolume);
    sliderVol.addEventListener('mousemove', showVolume);
    slider.addEventListener('mouseup', startDrag);
    sliderVol.addEventListener('mouseup', startDrag);
    sliderVol.querySelector('span').addEventListener('mouseup', startDrag);
    document.addEventListener('mouseup', startDrag);
    audioButton.addEventListener('click', mute);
}
function startDrag(event){
    if(event.type == "mousedown"){
        drag = true;
    }else{
        drag = false;
    }
}
function showVolume(event){
    if(drag){
        var w = slider.clientWidth;
        var x = (event.clientX) - slider.offsetLeft;
        var pctVol = x/w;

        if(pctVol >1 ){
            sliderVol.style.width = 100+"%";
            audioElement.volume = 1;
        }else if( pctVol < 0 ){
            sliderVol.style.width = 0+"%";
            audioElement.volume = 0;
        }else{
            sliderVol.style.width = (x/w) * 100+"%";
            audioElement.volume = pctVol;
        }
        if(pctVol<=0){
            audioButton.querySelector('span').className = 'ion-volume-mute';
        }else if(pctVol>0 && pctVol<=0.6){
            audioButton.querySelector('span').className = 'ion-volume-low';
        }else{
            audioButton.querySelector('span').className = 'ion-volume-medium';
        }
    }
}
function mute(){
    if(!audioElement.muted){
        audioElement.muted = true;
        audioElement.volume = 0;
        sliderVol.style.width = 0+"%";
        audioButton.querySelector('span').className = 'ion-volume-mute';
    }else{
        audioElement.muted = false;
        audioElement.querySelector('span').className = 'ion-volume-medium';
        audioElement.volume = 0.9;
        sliderVol.style.width = 90+"%";
    }
}
function playAudio(){
    // Verifica se a música foi iniciada
    if(audioElement.played.length != 0){
        // Verifica se a música foi pausada
        if(audioElement.played.start(0)==0 && !audioElement.paused){
            audioElement.pause(); // Pausa a música
            playButton.querySelector('span').className = "btPlay"; // Muda a imagem do botão pause para o play
            playButton.innerHTML = "<img src='http://i.cubeupload.com/Ad7lc8.png' width='25' height='25' alt='Reproduzir' title='Reproduzir'/>";
        }else{
            audioElement.play();
            playButton.querySelector('span').className = "btPause"; // Muda a imagem do botão play para pause
            playbutton.innerHTML = "<img src='http://i.cubeupload.com/SPRXTQ.png' width='25' height='25' alt='Pausar' title='Pausar'>";
        }
    }else{
        audioElement.play(); //Se não estiver pausada ela toca automaticamente
        playButton.querySelector('span').className = "btPause"; // Muda o icone do botão play para pause
        playButton.innerHTML = "<img src='http://i.cubeupload.com/SPRXTQ.png' width='25' height='25' alt='Pausar' title='Pausar'>";
    }
}

HTML

<!-- Botão de play e pause -->
            <div class="control left play">
                <!-- btPause -->
                <!-- Como padrão a imagem que apresenta no player é de pausar -->
                <span class="btPause"><img src='http://i.cubeupload.com/SPRXTQ.png' width='25' height='25' alt='Pausar' title='Pausar'></span>
            </div>
5
  • Você precisa super editar essa postagem, ta muito bagunçada.. 20/05/2018 às 3:04
  • foi o melhor q consegui, espera, alguém ja edita, só nao entende o porque do voto negativo se estou aqui pra aprender, e não estou pedindo nada pronto
    – goio
    20/05/2018 às 3:05
  • 1
    É que não adianta só jogar o código na pergunta. Vc precisa ser específico, mostrar onde as coisas acontecem, explicar, mostrar de forma clara e precisa. Onde acontece o quê, botar setas, prints de tela, gravar um vídeo etc.. (não, sacanagem rs)... fiz a piada só pra vc ver que tem que mostrar o problema de forma mais clara.
    – Sam
    20/05/2018 às 4:59
  • 1
    Tipo: Eu tenho esse botão aqui (mostra o código) e ao clicar nele chama essa função (código)... quero que ao clicar mude o texto de X para Y... o botão começa com o texto X....
    – Sam
    20/05/2018 às 5:01
  • @dvd rsrsrs editei a pergunta, fiz o exemplo do amigo ali em baixo e funcionou, só que está dando um erro, não sei porque
    – goio
    20/05/2018 às 7:25

2 Respostas 2

1

Creio que seu problema seja estar usando o querySelector() de forma errada. Uma vez que você quer buscar um elemento específico, é mais fácil usar a classe dele ou o id, neste caso, se você tem certeza que o audio está tocando, você sabe qual a classe que o ícone tem, se é .btPlay ou .btPause, tendo isso, facilita a busca pelo elemento.

abaixo deixo um exemplo prático e funcional que você pode adotar e utilizar. Para o o exemplo, fiz pequenas alterações e deixei o código bem limpo, agora é só pegar a lógica e a sintaxe e adicionar ao seu código.

Veja que eu seleciono o botão de play usando document.querySelect(".ClasseDoBotao"), se audio está tocando, a classe dele é btPause(pq vai pausar), senão é btPlay. Feito isso, é só alterar o elemento.

O erro que você está recebendo na sua imagem, é que o querySelector não está achando o elemento na tela, pois você está procurando ele errado usando playButton.querySelector o JS não sabe o que é playButton neste caso.

var audioTocando = true;
document.querySelector('.control').onclick = function(){
  if(audioTocando){
        audioTocando = false;
        var playButton = document.querySelector('.btPause');
        playButton.className = "btPlay";
        playButton.innerHTML = "<img src='http://i.cubeupload.com/Ad7lc8.png' width='25' height='25' alt='Reproduzir' title='Reproduzir'/>";
  } else {
        audioTocando = true;
        var playButton = document.querySelector('.btPlay')
        playButton.className = "btPause";
        playButton.innerHTML = "<img src='http://i.cubeupload.com/SPRXTQ.png' width='25' height='25' alt='Pausar' title='Pausar'>";
  }
}
.btPause{
  border: 1px solid blue;
  min-height: 30px;
  min-width: 30px;
  display: inline-block;
}

.btPlay{
  border: 1px solid red;
  min-height: 30px;
  min-width: 30px;
  display: inline-block;
}
<div class="control left play">
    <span class="btPause">Click</span>
</div>

1
  • eita mano vcoê é zika, deu certinho valeu
    – goio
    22/05/2018 às 6:56
-1

Hmm, nunca cheguei a usar esse método querySelector, normalmente eu uso document.getElementById ou document.getElementsByClassName quando eu quero modificar elementos html.

Por exemplo, esse caso expecifico seria resolvido assim:

const playButton = document.getElementsByClassName("btPlay");
playButton.innerHTML = 'Pause'

Até onde eu saiba também, faz parte das melhores práticas usar Ids para esses tipos de caso onde só vai ser modificado um elemento isolado

Usando Id ficaria assim:

JavaScript

const playButton = document.getElementById('playButton');
playButton.innerHTML = 'Pause'

HTML

<div class="control left play">
    <!-- btPause -->
    <div class="btPlay" id="playButton"></div>
</div>
2
  • querySelector pode selecionar qualquer coisa, incluindo id, tag, classe, name... é a mesma coisa que document.getElementBy... só que ele sempre vai retornar apenas o primeiro elemento encontrado, exceto se usar querySelectorAll... 21/05/2018 às 12:54
  • @CalvinNunes procurando um pouco na internet parece que querySelector sempre pega um estado estatico do elemento, enquanto getElementBy... vai retornar um objeto 'live' do elemento, ou seja, vai estar sempre atualizado. Acredito que na maioria dos casos um objeto live vai ser sempre melhor.
    – João Haas
    24/05/2018 às 12:48

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .