Problema com botão Play/Pause

[Lucas Ramos_183943 1]

Estou enfrentado problemas com o botão Play/Pause. Testei o código no jsbin e estava tudo perfeito,mas quando fui instalá-lo no Blogger,não funcionou. Apenas o áudio funciona (autoplay),e quando quero parar o áudio e executá-lo novamente,não dá por conta do botão que não funciona após clicar.

 

Aqui está o código:

<div id="playpause"><img src='https://cdn2.iconfinder.com/data/icons/pictograms-4/512/49-32.png' style='height:32px; width:32px;'></div>


<audio id="player" autoplay="true" loop="true">
    <source src="http://www.thebentbullet.com/audio/xmen_bb-site_music-loop-03B.ogg" />
</audio>





<script>
  
window.player = document.getElementById('player');
document.getElementById('playpause').onclick = function () {
    if (player.paused) {
        player.play();
        this.innerHTML = "<img src='https://cdn2.iconfinder.com/data/icons/pictograms-4/512/49-32.png' style='height:32px; width:32px;'>";
    } else {
        player.pause();
        this.innerHTML = "<img src='https://cdn2.iconfinder.com/data/icons/picons-essentials/57/music_off-32.png' style='height:32px; width:32px;'>";
    }
}


</script>

Por qual motivo não funciona no Blogger? Pelo que eu saiba,não é nenhum conflito com outras bibliotecas.

 

[Lucas Ramos_183943 1]

Já resolvi o problema. O código funciona direito. Era alguns elementos que estavam sobrepostos.

 

mas pra deixá-lo completo,só acrescentar:

<script>
  $.noConflict();
  
  jQuery(document).ready(function($) {
window.player = document.getElementById('player');
document.getElementById('playpause').onclick = function () {
if (player.paused) {
        player.play();
        this.innerHTML = "<img src='URL DA IMAGEM' style='height:32px; width:32px;'/>";
    } else {
        player.pause();
        this.innerHTML = "<img src='URL DA IMAGEM' style='height:32px; width:32px;'/>";
    }
}
});
  
</script>

Enfim,deixo o código aí pra quem quiser usar.