Si, mira. Yo lo haría de otra manera. Probá con esto y me decís. Para probar, abrí un documento limpio y en la estructura básica de html, poné esto:
En el head
Código HTML:
<head>
<script type="text/javascript">
function playPause(){
var reproduciendo = true;
var pista = document.getElementById('nosemeocurre');
var boton_play_pause = document.getElementById('boton_play_pause');
boton_play_pause.onclick = function(){
if(reproduciendo){
reproduciendo = false;
pista.pause();
this.value = 'PLAY';
}else{
reproduciendo = true;
pista.play();
this.value = 'PAUSE';
}
}
}
window.onload = function(){
playPause();
}
</script>
</head> En el body
Código HTML:
<body>
<audio id="nosemeocurre" src="http://IP:PUERTO/;" autoplay> Si no le funciona, use otro navegador. No sea bobo.</audio>
<input type="button" id="boton_play_pause" value="PAUSE" />
</body> Y con css, lo vas armando más o menos así para que sea un solo botón:
CSS del botón -
arriba en el head, también, para probar-
Código:
<style type="text/css">
input[type=button] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
width: 60px;
height: 60px;
background: black;
border-radius: 20px;
text-align: center;
color: white;
font-size: 10px;
}
</style>
También podés hacer transparente el texto en el css y agregar un background-image con el png del las dos líneas del pause y el :hover de un png "play".
Fijate que tal y me decís.
P/D: En vez de la ruta de IP:PORT podés poner el audio y listo.