Un sitio web de música es básicamente una página web donde se puede reproducir/pausar música. Tiene otras opciones como la sección de inicio, la sección de música, la sección acerca de, la sección de contacto, etc. En este proyecto, vamos a crear un sitio web que reproducirá/pausará música usando HTML, CSS y JavaScript. Usaremos HTML para dar un diseño básico y con CSS, embelleceremos nuestro diseño dando una imagen de botón de reproducción y pausa. Usaremos funciones básicas de JavaScript como if-else y document.getElementById para reproducir y pausar nuestra música.
Acercarse:
- Crearemos el diseño básico, es decir, dos div s (izquierda y derecha) dentro de una etiqueta div. En el div izquierdo escribiremos algo de texto y en el div derecho colocaremos reproducir o pausar la imagen. También crearemos una barra de navegación básica y flotaremos a la derecha.
- Con la ayuda de CSS, embelleceremos nuestra estructura general dando una imagen de fondo, relleno, margen, etc.
- Usaremos funciones básicas de JavaScript como onclick(), play() , pause() y getElementById() para obtener el estado actual de la música y realizar los cambios correspondientes.
- Cuando el usuario reproduzca la música, mostraremos la imagen o el ícono de reproducción y cuando el usuario presione pausa, se mostrará la imagen o el ícono de pausa. Esto se hace usando una declaración if-else simple.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Styling the body */
* {
padding: 0;
margin: 0;
}
/* Styling the background image by
giving its url and position */
.container {
height: 100vh;
width: 100%;
background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20210402235143/background.jpg');
/* Image used: */
background-size: cover;
background-position: center;
position: relative;
}
/* Styling the list tags to the
right of the navigation bar */
.nav li {
float: right;
list-style: none;
}
/* Styling the anchor tags of
the navigation bar */
.nav a {
list-style: none;
height: 50px;
line-height: 50px;
font-size: 1rem;
font-weight: 550;
display: block;
padding: 5px 35px;
color: black;
text-decoration: none;
}
/* Giving position and margin
to the content-div */
.content {
width: 100%;
position: absolute;
top: 45%;
}
/* Styling the left-col by
giving margin */
.left-col {
margin-left: 11%;
}
/* Styling the my sound placed
in the left-col */
.left-col h1 {
font-size: 50px;
color: crimson;
}
/* Styling the right-col */
.right-col {
float: right;
margin-right: 10%;
margin-top: -5%;
display: flex;
align-items: center;
}
/* Styling the text in the right-col */
.right-col p {
font-size: 21px;
color: black;
font-weight: 650;
margin-right: 20px;
}
/* Styling the cursor type
of the icon to pointer */
#icon {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<ul class="nav">
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">ARTISTS</a></li>
<li><a href="#">MUSIC</a></li>
<li><a href="#">HOME</a></li>
</ul>
</div>
<div class="content">
<div class="left-col">
<h1>MY <br> SOUNDS</h1>
</div>
<div class="right-col">
<p>Click Here To Listen</p>
<img src="media/play.png" id="icon">
</div>
</div>
<audio id="mysound">
<source src="media/music.mp3" type="audio/mp3">
</audio>
<script>
var mysound = document.getElementById("mysound");
var icon = document.getElementById("icon");
// Creating a function that will change
// pause to play and vice-versa
icon.onclick = function() {
if (mysound.paused) {
// If paused then play the
// music and change the image
mysound.play();
icon.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210402235545/Pause.png";
} else {
// If playing then pause the
// music and change the image
mysound.pause();
icon.src =
"https://media.geeksforgeeks.org/wp-content/uploads/20210402235520/play.png";
}
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por imsushant12 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA