Javascript Mute não funciona (custom HTML5 player)

Lerub · 2 de agosto de 2019

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>

GabrielSennaMs · 3 de agosto de 2019

@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";
    }
}

Lerub · 3 de agosto de 2019

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

Lerub · 3 de agosto de 2019

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";
    }
}

Lerub · 4 de agosto de 2019

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";
    }
}