Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » ¿Cómo Incluir audio a etiqueta estilizada de html?

HTML - ¿Cómo Incluir audio a etiqueta estilizada de html?

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Suriel
Val: 4
Ha aumentado su posición en 6 puestos en HTML (en relación al último mes)
Gráfica de HTML

¿Cómo Incluir audio a etiqueta estilizada de html?

Publicado por Suriel (2 intervenciones) el 17/01/2020 19:36:22
Estoy trabajando con un reproductor de musica que sólo funciona gráficamente pero necesito incluirle una canción que se reproduzca automáticamente al cargar mi html.

El siguiente código gráficamente es:
1
2
3
4
5
6
7
8
9
10
11
<a class="music-bg">
    <div class="lines">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <p> Musica </p>
</a>

Y el CSS para darle efectos de barras de sonido ecualizador es el sig:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
.music-bg {
   background:#000;
   display: block;
   cursor: pointer;
   padding: 40px 0;
   text-align: center;
   border-top: 5px solid #fff;
   z-index: 10;
   -webkit-transition: all .3s ease;
   -moz-transition: all .3s ease;
   -o-transition: all .3s ease;
   transition: all 0.3s ease;
 }
 
  .music-bg p {
  color: #fff;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
 
 }
 
.music-bg .lines {
 display: flex;
 width: 24px;
 height: 24px;
 margin: 0 auto 10px;
 align-items: flex-end;
}
 
 .music-bg .lines span {
 display: inline-flex;
 margin: 0px 1px;
 width: 7px;
 height: 5px;
 background: #fff;
 }
 
 .audio-on .lines span:nth-child(1) {
 -webkit-animation: musicline 2s 0.5s ease-out alternate infinite;
 animation: musicline 2s 0.5s ease-out alternate infinite;
 }
 
.audio-on .lines span:nth-child(2) {
-webkit-animation: musicline 2s 1s ease-out alternate infinite;
 animation: musicline 2s 1s ease-out alternate infinite;
 }
 
 .audio-on .lines span:nth-child(3) {
 -webkit-animation: musicline 2s 1.5s ease-out alternate infinite;
 animation: musicline 2s 1.5s ease-out alternate infinite;
 }
 
 .audio-on .lines span:nth-child(4) {
 -webkit-animation: musicline 2s 0.25s ease-out alternate infinite;
 animation: musicline 2s 0.25s ease-out alternate infinite;
 }
 
 .audio-on .lines span:nth-child(5) {
 -webkit-animation: musicline 2s 0.75s ease-out alternate infinite;
 animation: musicline 2s 0.75s ease-out alternate infinite;
 }
 
 .audio-on .lines span:nth-child(6) {
 -webkit-animation: musicline 2s 1.25s ease-out alternate infinite;
 animation: musicline 2s 1.25s ease-out alternate infinite;
 }
 
 @keyframes musicline {
  from {height: 3px;}
  to {height: 15px;}
}

El código CSS sólo da el aspecto de reproducir una canción (PERO NO HAY DICHA CANCIÓN) y el usuario puede dar clic para pausar dicho efecto, como se muestra en las imágenes.

NECESITO REALMENTE INCLUIR UNA CANCIÓN CON ESTE CÓDIGO YA CREADO. ME HAN DICHO QUE CON LA ETIQUETA <audio> puedo reproducir un audio de fondo, pero lo que quiero es enlazarlo al reproductor css para pausar y reproducir con un solo click. AGRADEZCO SUS CONSEJOS
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

¿Cómo Incluir audio a etiqueta estilizada de html?

Publicado por juan jose (51 intervenciones) el 18/01/2020 05:21:47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    <title>audio</title>
 
</head>
<body>
 
<a  class="music-bg" onclick="control()">
    <div class="lines">
        <audio>
            <!--cambia el src por tu archivo de musica en formato mp3-->
            <source src="tu_musica.mp3" type="audio/mpeg">
        </audio>
    </div>
</a>
 
<script>
var contador=1;
var audio=document.getElementsByTagName("audio")[0];
audio.play();
 
function control(){
 
    contador = contador+1
    if (contador%2==0){
        audio.pause();
    } else {
        audio.play();
    }
}
</script>
 
</body>
</html>

pruebalo dentro de un xampp, mamp o un servidor real, inicia automaticamente y el enlace que tienes de musica, es para parar o reproducir

salu2
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
3
Comentar
Imágen de perfil de Suriel
Val: 4
Ha aumentado su posición en 6 puestos en HTML (en relación al último mes)
Gráfica de HTML

¿Cómo Incluir audio a etiqueta estilizada de html?

Publicado por Suriel (2 intervenciones) el 18/01/2020 22:43:44
Nadie me pudo ayudar en ningún lado más que tu. GRACIAS @juan jose
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

¿Cómo Incluir audio a etiqueta estilizada de html?

Publicado por ANDRES (1 intervención) el 19/01/2022 17:17:16
<script>
var contador=1;
var audio=document.getElementsByTagName("audio")[0];
audio.play();

function control(){

contador = contador+1
if (contador%2==0){
audio.pause();
} else {
audio.play();
}
}
</script>
¿esto va en el HTML en CSS o en JS ?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar