Ir ao conteúdo
  • Cadastre-se
Lerub

Javascript RESOLVIDO Mute não funciona (custom HTML5 player)

Posts recomendados

Hello!

 

Eu estou trabalhando em um player customizado e eu estou tendo uns problemas. Primeiro, eu só digitei tudo ao invés de copiar e colar. Deu erro e eu tive que fazer isso e só depois fazer as minhas modificações.

 

Depois de testar tudo e der tudo certo, eu pesquisei um pouco e encontrei alguns tutoriais na W3 e aprendi um pouco sobre mute. Baseado no pouco conhecimento que eu tenho sobre vars, eu tentei adicionar um botão mute.

 

Agora, o player funciona, porém, o mute não.

 

Lá vai código!

 

<body>
<audio id="podcast" preload="false">
  <source src="ht]">
            <source src="">
    </audio>
<div id="audioplayer">
    <button id="pButton" class="play"></button>
        
  <div id="timeline">    
          <div id="playhead"></div>
        <button class="unmutedAudio" id="muteb">mute</button>
  </div>

</div>

                <!--Apesar de eu ter digitado linha por linha, só depois que eu copiei, colei e fiz as mnhas alterações, que isso aqui funcionou.
    
   http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/-->
                
<script>
var podcast = document.getElementById('podcast'); // id for audio element
var muteb = document.getElementById('muteb');
var duration = podcast.duration; // Duration of audio clip, calculated here for embedding purposes
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline

// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// play button event listenter
pButton.addEventListener("click", play);

muteb.addEventListener("click", muted);


// timeupdate event listener
podcast.addEventListener("timeupdate", timeUpdate, false);

// makes timeline clickable
timeline.addEventListener("click", function(event) {
    moveplayhead(event);
    podcast.currentTime = duration * clickPercent(event);
}, false);

// returns click as decimal (.77) of the total timelineWidth
function clickPercent(event) {
    return (event.clientX - getPosition(timeline)) / timelineWidth;
}

// makes playhead draggable
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that audio position is updated only when the playhead is released
var onplayhead = false;

// mouseDown EventListener
function mouseDown() {
    onplayhead = true;
    window.addEventListener('mousemove', moveplayhead, true);
    podcast.removeEventListener('timeupdate', timeUpdate, false);
}

// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(event) {
    if (onplayhead == true) {
        moveplayhead(event);
        window.removeEventListener('mousemove', moveplayhead, true);
        // change current time
        podcast.currentTime = duration * clickPercent(event);
        podcast.addEventListener('timeupdate', timeUpdate, false);
    }
    onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(event) {
    var newMargLeft = event.clientX - getPosition(timeline);

    if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
        playhead.style.marginLeft = newMargLeft + "px";
    }
    if (newMargLeft < 0) {
        playhead.style.marginLeft = "0px";
    }
    if (newMargLeft > timelineWidth) {
        playhead.style.marginLeft = timelineWidth + "px";
    }
}

// timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
    var playPercent = timelineWidth * (podcast.currentTime / duration);
    playhead.style.marginLeft = playPercent + "px";
    if (podcast.currentTime == duration) {
        pButton.className = "";
        pButton.className = "play";
    }
}

//Play and Pause
function play() {
    // start music
    if (podcast.paused) {
        podcast.play();
        // remove play, add pause
        pButton.className = "";
        pButton.className = "pause";
    } else { // pause music
        podcast.pause();
        // remove pause, add play
        pButton.className = "";
        pButton.className = "play";
    }
}

function mute() {
    if (podcast.muted = true) {
        podcast.muted = false;
muteb.className = "";
muteb.className = "mutedAudio";
} else {
    podcast.muted = false;
    muteb.className = "";
    muteb.className = "unmutedAudio";
    }
}
// Gets audio file duration
podcast.addEventListener("canplaythrough", function() {
    duration = podcast.duration;
}, false);

// getPosition
// Returns elements left position relative to top-left of viewport
function getPosition(el) {
    return el.getBoundingClientRect().left;
}


        </script>
               

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Lerub Eu encontrei alguns erro no seu código.

 

Quando você adiciona um evento de click no botão mute você adiciona uma função callBack que não existe.

muteb.addEventListener("click", muted);

O nome da função que você crio para mutar o player e "mute" sem o d no final

muteb.addEventListener("click", mute);

 

Também tem dois erros na função mute() dentro do IF que verifica se o player está mutado ou não.

function mute() {
    if (podcast.muted = true)
    {
        podcast.muted = false;
        muteb.className = "";
        muteb.className = "mutedAudio";
    }
    else
    {
        podcast.muted = false;
        muteb.className = "";
        muteb.className = "unmutedAudio";
    }
}

O primeiro erro está no inicio do IF, na verificação do valor do atributo muted, você colocou com um iguar, assim ele não está comparando o valor e sim atribuindo um valor ao atributo.

 

O segundo erro está na primeira linha embaixo do ELSE, você atribui o valor false ao atributo muted do player, sendo que deveria ser o valor true.

 

A função mute() corrigida ficaria assim:

function mute() {
    if (podcast.muted == true)
    {
        podcast.muted = false;
        muteb.className = "";
        muteb.className = "mutedAudio";
    }
    else
    {
        podcast.muted = true;
        muteb.className = "";
        muteb.className = "unmutedAudio";
    }
}

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@GabrielSennaMs Grande, gab! E dessa vez, você não precisou ficar uma hora esperando para ver se encontra um erro.=D

 

Eu me esqueci do duplo igual...

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ok. Agora eu estou tendo problemas com os segundos.O tempo aparece corretamente.  Eu só não aprendi a dizer ao navegador quais números devem aparecer.

 

<audio id="podcast" preload="false">
  <source src="-mario-rpg.mp3">
            <source src="">
    </audio>
<div id="audioplayer">
    <button id="pButton" class="play"></button>
                <button class="unmutedAudio" id="muteb">mute</button>
  <div id="timeline">    
      <span id="time" ></span>
          <div id="playhead"></div>

  </div>

</div>

                <!--Apesar de eu ter digitado linha por linha, só depois que eu copiei, colei e fiz as mnhas alterações, que isso aqui funcionou.
    
   http://alexkatz.me/posts/building-a-custom-html5-audio-player-with-javascript/-->
                <!--Agradecimentos ao  GabrielSennaMs  por corrigir os bugs!-->
<script>
var podcast = document.getElementById('podcast'); // id for audio element
var muteb = document.getElementById('muteb');
var duration = podcast.duration; // Duration of audio clip, calculated here for embedding purposes
var pButton = document.getElementById('pButton'); // play button
var playhead = document.getElementById('playhead'); // playhead
var timeline = document.getElementById('timeline'); // timeline

// timeline width adjusted for playhead
var timelineWidth = timeline.offsetWidth - playhead.offsetWidth;

// play button event listenter
pButton.addEventListener("click", play);

muteb.addEventListener("click", mute);


// timeupdate event listener
podcast.addEventListener("timeupdate", timeUpdate, false);

// makes timeline clickable
timeline.addEventListener("click", function(event) {
    moveplayhead(event);
    podcast.currentTime = duration * clickPercent(event);
}, false);

// returns click as decimal (.77) of the total timelineWidth
function clickPercent(event) {
    return (event.clientX - getPosition(timeline)) / timelineWidth;
}

// makes playhead draggable
playhead.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);

// Boolean value so that audio position is updated only when the playhead is released
var onplayhead = false;

// mouseDown EventListener
function mouseDown() {
    onplayhead = true;
    window.addEventListener('mousemove', moveplayhead, true);
    podcast.removeEventListener('timeupdate', timeUpdate, false);
}

// mouseUp EventListener
// getting input from all mouse clicks
function mouseUp(event) {
    if (onplayhead == true) {
        moveplayhead(event);
        window.removeEventListener('mousemove', moveplayhead, true);
        // change current time
        podcast.currentTime = duration * clickPercent(event);
        podcast.addEventListener('timeupdate', timeUpdate, false);
    }
    onplayhead = false;
}
// mousemove EventListener
// Moves playhead as user drags
function moveplayhead(event) {
    var newMargLeft = event.clientX - getPosition(timeline);

    if (newMargLeft >= 0 && newMargLeft <= timelineWidth) {
        playhead.style.marginLeft = newMargLeft + "px";
    }
    if (newMargLeft < 0) {
        playhead.style.marginLeft = "0px";
    }
    if (newMargLeft > timelineWidth) {
        playhead.style.marginLeft = timelineWidth + "px";
    }
}

// timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
    var playPercent = timelineWidth * (podcast.currentTime / duration);
 
   document.getElementById("time").innerHTML = podcast.currentTime % 60;
    playhead.style.marginLeft = playPercent + "px";
    if (podcast.currentTime == duration) {
        pButton.className = "";
        pButton.className = "play";
    }
}

//Play and Pause
function play() {
    // start music
    if (podcast.paused) {
        podcast.play();
        // remove play, add pause
        pButton.className = "";
        pButton.className = "pause";
    } else { // pause music
        podcast.pause();
        // remove pause, add play
        pButton.className = "";
        pButton.className = "play";
    }
}

function mute() {
    if (podcast.muted == true) {
        podcast.muted = false;
muteb.className = "";
muteb.className = "mutedAudio";
} else {
    podcast.muted = true;
    muteb.className = "";
    muteb.className = "unmutedAudio";
    }
}
// Gets audio file duration
podcast.addEventListener("canplaythrough", function() {
    duration = podcast.duration;
}, false);

// getPosition
// Returns elements left position relative to top-left of viewport
function getPosition(el) {
    return el.getBoundingClientRect().left;
}


        </script>

@GabrielSennaMs Grande, gab! E dessa vez, você não precisou ficar uma hora esperando para ver se encontra um erro.=D

 

Eu me esqueci do duplo igual...

 

 

Edit:

 

Resultados satisfatorios.

 


timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
    var playPercent = timelineWidth * (podcast.currentTime / duration);
   document.getElementById("time").innerHTML = Math.floor(this.currentTime % 60);
    playhead.style.marginLeft = playPercent + "px";
    if (podcast.currentTime == duration) {
        pButton.className = "";
        pButton.className = "play";
    }
}

Compartilhar este post


Link para o post
Compartilhar em outros sites


Feito na noite anterior

 



// timeUpdate
// Synchronizes playhead position with current point in audio
function timeUpdate() {
    var playPercent = timelineWidth * (podcast.currentTime / duration);
   document.getElementById("time").innerHTML = Math.floor(this.currentTime / 3600) + ' / '  + Math.floor(this.currentTime / 60 % 60) + ' / ' + Math.floor(this.currentTime % 60);
   
   
    playhead.style.marginLeft = playPercent + "px";
    if (podcast.currentTime == duration) {
        pButton.className = "";
        pButton.className = "play";
    }
}

 

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

×
×
  • Criar novo...

Eletrônica

PROMOÇÃO DE QUARENTENA

Aproveite o isolamento social para aprender eletrônica!
De R$ 39,90 por apenas R$ 19,90
Só até as 23h59min desta sexta-feira 10/04/2020

CLIQUE AQUI E COMPRE AGORA MESMO!