Antes de HTML5 la única forma de poner sonido a nuestras paginas era a través de plug-ins como Flash, ahora y de manera muy facil incorporar sonido a nuestro html, veamos un ejemplo:
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src=”miSonido.mp3” type = “audio/mpeg”>
<source src=”miSonido.ogg” type =”audio/ogg”>
<source src=”miSonido.wav” type = “audio/wav”>
Tu navegador no soporta Audio HTML5
</audio>
</body>
</html>
ASI DE FACIL ES!!!
Como podrás deducir soporta los formatos mas populares como son mp3,wav y ogg.
Este control es totalmente personalizable a nuestro gusto y necesidades, veamos otro ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Audio HMTL5</title
</head>
<style>
body {
background-image: url("bep.jpg");
background-repeat:no-repeat;
background-position:right top,
background-attachment: fixed;
background-size:cover;
}
button {
background-color:green;
border:none;
color:white;
text-align:center;
display:inline-block;
font-size: 16px;
}
#btsubir {
background-color:green;
border:none;
color:white;
text-align:center;
font-size:16px;
display:inline-block;
}
</style>
<script>
function tocar(){
document.getElementById("miMP3").play();
}
function pausar(){
document.getElementById("miMP3").pause();
}
function subir(){
if (document.getElementById("miMP3").volume<1){
document.getElementById("miMP3").volume+=0.1;
}
}
function bajar(){
if (document.getElementById("miMP3").volume>0.1){
document.getElementById("miMP3").volume-=0.1;
}
}
function repetir(){
document.getElementById("miMP3").loop= !document.getElementById("miMP3").loop;
if(document.getElementById("miMP3").loop){
document.getElementById("btRepetir").innerHTML ="Repetir=ON";
}else{
document.getElementById("btRepetir").innerHTML="Repetir=OFF";
}
}
</script>
<body>
<audio id = "miMP3" autoplay >
<source src="bep.mp3" type="audio/mp3" >
Tu navegador no soporta audio en HTMl5.
</audio>
<button onclick ="tocar();"><p>Play</p></button>
<button onclick ="pausar();"><p>Pause</p></button>
<button onclick ="repetir();"><p id = "btRepetir">Repetir=OFF</p></button>
<button onclick ="subir();"><p> + </p></button>
<p id="btsubir">Volumen</p>
<button onclick ="bajar();"><p> - </p></button>
</body>
</html>
No hay comentarios.:
Publicar un comentario