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