[SOLUCIONADO] Control de sonido, solo play y pause

alexfut · #1 (**permalink**) 07/02/2015, 22:47

Que tal, quiero insertar diversos audios en una pagina web, para ello estoy probando lo siguiente

Código HTML:

<audio src="intro.mp3" controls preload > </audio>

y el resultado predeterminado es este

Pero yo quisiera que solo apareciera el boton play/pause de la siguiente forma

Existe alguna forma de hacerlo?

Esta ya es mi última opción, lo que quería en un principio es que dentro del texto haya hipervinculos y al clicarlos se reprodujera el audio, vi un tutorial aquí http://www.javascriptkit.com/script/...oundlink.shtml pero no es viable ya que pondría muchos audos distintos en cada página, y con este tutorial hay que insertar un javascript en el head para designar los audios, y como usaré un CMS, veo complicado hacerlo.

EN fin, lo primero sobre que el reproductor de audio en html5 sea solo el play/pause en lugar de todo, es posible? saludos.

LucasAddams · #2 (**permalink**) 07/02/2015, 23:10

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.

alexfut · #3 (**permalink**) 08/02/2015, 11:59

Funciona de maravilla, veré si lo puedo usar en mi CMS, le haré unas modificaciones para hacerlo con una imagen en lugar del botón. Por último, si quisiera que fuera solo play en lugar de play/pause, que parte del javascript debería quitar?

LucasAddams · #4 (**permalink**) 08/02/2015, 12:10

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="PLAY" />

 </body>

Y mira el script, ahí vas a encontrar lo que decís :3

alexfut · #5 (**permalink**) 08/02/2015, 13:56

Está muy bien, pero me surge el mismo problema de solo poder poner un audio por página, duplico el script cambiando el ID, digamos

Código HTML:

var pista = document.getElementById('nosemeocurre2');
  var boton_play_pause = document.getElementById('boton_play_pause2');

y al agregar el boton con el id cambiado

Código HTML:

<audio id="nosemeocurre2" src="moscow.mp3" autoplay> Si no le funciona, use otro navegador. No sea bobo.</audio>
            <input type="button" id="boton_play_pause2" value="PLAY" />

Pero solo me funciona un solo audio, ya sea el primero o el segundo. No puedo tener 2 o más audios al mismo tiempo.

No existirá una forma en HTML5 para CONTROLS que pueda indicar que solo quiero el boton play y no la linea de tiempo y todo eso?

LucasAddams · #6 (**permalink**) 08/02/2015, 17:58

Te dejo esto, investiga más: http://www.w3schools.com/html/html5_audio.asp

alexfut · #7 (**permalink**) 08/02/2015, 20:02

En el último enlace que me mostraste no había al respecto, pero finalmente investigando en muchas páginas di con la solución, HTML5 con un poco de javascript sin nada en el head y muy sencillo, lo comparto por si alguien lo necesitase algún día.

Así como yo lo quiero solo en play sería

Código HTML:

<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
</div>

Y si lo quieren con más opciones usar esto

Código HTML:

<audio id="player" src="sound.mp3"></audio>
<div>
<button onclick="document.getElementById('player').play()">Play</button>
<button onclick="document.getElementById('player').pause()">Pause</button>
<button onclick="document.getElementById('player').volume+=0.1">Volume Up</button>
<button onclick="document.getElementById('player').volume-=0.1">Volume Down</button>
</div>