Poner sonido con boton de Play/Pausa

Hoa queria consultarles si alguien me puede ayudar, resulta que tengo que poner un sonido en una web, el cual se ejecute atraves de un boton "PLAY/Pause", el cual lo puede customizar por css, he buscado muchos pero todos usan Flash y seria ideal evitarlo.
Espero ser claro y que alguien me ayude.
Gracias

BEZOWIE

Hola, podes utilizar el elemento audio de html, te paso la doc de w3schools acá

Saludos!

Si eso lo sé pero lo que necesito es que solo aparezca el Play y Pause cuando se esta escuchando el sonido, y con la etiqueta Audio me aparecen todos los controles (play.pause.senking.volumen) y no los puedo personalizar con css por lo que sé.
Igual gracias.

Esos controles los tienes que hacer tú. La API de audio tiene llamadas a métodos para hacer play y pausa: Everything you need to know about HTML5 video and audio el artículo está centrado más en <video> pero para <audio> es lo mismo (salvando las diferencias).

Hasta ahora di con un ejemplo que andaría bien pero no logro darle con CSS para la instancia Play y otra para PAUSA, en este ejemplo aparece con "||" y ">" respectivamente.

Código :

<script type="text/javascript">

    function audioplay() {
       var audio = document.getElementById("audio1");
       var button = document.getElementById("play");
       if (audio.paused) {
          audio.play();
          button.textContent = "||";
        
       } else {
          audio.pause();
          button.textContent = ">";
       }
    }
   
</script>

Código HTML :

<audio id="audio1" >
//  Replace these with your own files. 
     <source src="spot.mp3" type="audio/mp3" />
     <source src="spot.ogg" type="audio/ogg" />
     HTML5 Audio is required for this example. 
</audio>

<div id="buttonbar">
    <button id="play" onclick="audioplay()">&gt;</button>

</div>  

bezowie escribió:

"||" y ">" son el contenido del botón y nada tienen que ver con el css...

Deberías agregarle una clase mediante jquery para poder darle los estilos según el estado, sería algo así:

Código Javascript :

function audioplay() {

       var audio = document.getElementById("audio1");

       var button = document.getElementById("play");

       if (audio.paused) {

          audio.play();

          button.textContent = "||";

        $(button).addClass("clase_en_play");

        $(button).removeClass("clase_en_pausa");

       } else {

          audio.pause();

          button.textContent = ">";


        $(button).removeClass("clase_en_play");

        $(button).addClass("clase_en_pausa");

       }

    }

O ponele los estilos generales de una y hace que una sola clase sea la que haga las diferencias entre play y pause.

Saludos!

Hola,
He cojido este script para poner música en mi web. Me gustaría saber como podría cambiar los simbolos "II" y ">" por imágenes.

Gracias!

Poniendo en textContent un string vacío y asignandole la imagen en cuestión por CSS.

Saludos!

A mi me funcionó el siguiente código en todos los navegadores, sólo IE da problemas, que no admite el parámetro hidden. Tampoco me preocupé por resolverlo. Si alguien le busca solución perfecto.
Se entiende que audio.png corresponde a la imagen play y audiooff.png a la imagen stop.
Simplemente lo que hacemos es ocultar el controlador y asignar a las imágenes las funciones de play y stop con javascript.

Código HTML :

<audio id="audio1" controls autoplay loop hidden>
<!-- Aquí pondríamos la dirección del archivo de música  y el tipo MIME, es conveniente alojar el archivo en formato mp3 y ogg -->
  <source src="musica.ogg" type="audio/ogg">
  <source src="musica.mp3" type="audio/mpeg">
  <object type="application/x-shockwave-flash" data="player.swf?soundFile=musica.mp3">
        <param name="movie" value="player.swf?soundFile=musica.mp3" />
   </object>
</audio>

<script>

function permuter(arg)
{
miaudio=document.getElementById("audio1");
var arg2 = String(arg);var elt2 = document[arg2];
if (elt2.src.indexOf('audio.png') > -1) <  <!-- Cambiar dirección -->
   {
      miaudio.autoplay=false;
      miaudio.load();
      elt2.src = 'audiooff.png';  <!-- Cambiar dirección -->
   }
else
   {
      miaudio.autoplay=true;
      miaudio.load();   
      elt2.src = 'audio.png';  <!-- Cambiar dirección -->
   }
}
</script>

<a  href="javascript:void(0)" onclick="javascript:permuter('imgaudio');" return false;>
<img name="imgaudio"  src="audio.png" alt="Audio" border="0">  <!-- Cambiar dirección -->
</a>