boton play/pause con jquery

[00israel]

vale, lo tengo, pero no llego a entender muy bien porque me esta funcionando ahora:

Código:

<script>
	  	$(document).ready(function(){
	  			var audio = $('audio')[0]
	  			$('#toggle').click(function(){
	  				if (audio.paused){
	  				audio.play();
	  				}
	  				else {
	  				audio.pause();
	  				}
	  				$(this).toggleClass('pause');
	  			});
	  	});
  	</script>

aparte de tener este codigo, me he creado un id:

Código:

<div id="toggle" class="play"></div>

al cual le he dado estilos y un par de clases, .play y .pause:

Código:

.play {
    background: url('../img/play.svg') no-repeat;
  }
.pause {
    background: url('../img/pause.svg') no-repeat;
  }

entiendo que lo hace todo el toggleClass pero he visto por ahí que la gente añadía o sustituia (no estoy seguro) aparte del anterior script otro , como este:

Código:

<script type="text/javascript">
      $(document).ready(function() {
        $('#toggle').bind("click", function() {
          if ($(this).attr("class") == "play")
             $(this).attr("class", "pause");
          else
             $(this).attr("class", "play");
        });
      });
    </script>

Si tenia los dos puestos no me funcionaba, pero al quitar este último ya me ha funcionado.

Igual se creaba algún conflicto entre ellos, si alguien pudiera explicarmelo, se lo agradecería.

un saludo.