Se puede NO CARGAR audio html5 desde css?

[jakijem]

Tengo un audio en html5:

Código HTML:

 <audio id="xxxx">
    <source src="audios/zzz.mp3" type="audio/mpeg">
    <source src="audios/zzz.ogg" type="audio/ogg">
    </audio> 

Y quisiera saber si es posible que NO cargue según el css que invoque con las mediaqueries, es decir, que se cargue por ejemplo para PC, pero no en las css de dispositivos pequeños... pero no solo que no cargue la interfaz, sino el archivo en si, dado que si solo anulo la interfaz en un css determinado, el audio sigue cargandose y sonando... no se si me explico

[MaNuX0218]

Con css lo que se me ocurre es que no tenga autoreproducción, entonces lo ocultas y como está oculto no podran darle a play.

Otra opción (seguro mas efectiva) es utilizar javascript.

Saludos.

[jakijem]

Iniciado por MaNuX0218

Con css lo que se me ocurre es que no tenga autoreproducción, entonces lo ocultas y como está oculto no podran darle a play.

Y como seria esta opcion?

[javy7v]

Creo que a lo que se refiere el compañero es simplemente cogiendo el id del elemento que quieres ocultar y hacerle display:none;

Por ejemplo si no quieres que cargue en moviles podria ser algo asi creo:

@media screen and (max-width: 480px) {
#xxxx{
display:none;
}
}

[jakijem]

Iniciado por javy7v

Creo que a lo que se refiere el compañero es simplemente cogiendo el id del elemento que quieres ocultar y hacerle display:none;

Por ejemplo si no quieres que cargue en moviles podria ser algo asi creo:

@media screen and (max-width: 480px) {
#xxxx{
display:none;
}
}

No, eso lo que hace solo es ocultar la interfaz, pero el audio esta ahi sonando, lo que proponia MaNuX0218 es desactivar la reproducción automática, pero desde CSS ya que si lo hago desde javascript se desactivaria para todas las páginas

[MaNuX0218]

Lo que yo te digo es que no esté la autoreproducción.

En vez de:

<audio id="xxx" controls autoplay>

Dejarlo:

<audio id="xxx" controls>

Una vez tenerlo asi, el usuario deverá darle a play para reproducir, si no no reproducirá.

Entonces ahora toca ocultarlo con css para dispositivos:

Código CSS:

@media (max-width: 768px) {
#xxx {
display:none;
}
}
 

Saludos.

[jakijem]

No, pero entonces el control reside en el html, y se comportara igual (no reproducirá automaticamente) en todas las versiones.

Lo que necesito es que reproduzca automaticamente en la version para pc, pero que no lo haga en las otras...

[MaNuX0218]

Pues entonces te invito a que publiques tu problema en el foro de javascript, utilizando javascript conseguiras lo que pides.

Saludos.