[Duda] Resuelta | Sobre la desaparición de Adobe Flash Player

Hola

Creo que para nadie es un secreto que este programa va a desaparecer el 31 de diciembre y hay como una especie de prórroga para usarlo hasta el 12 de enero, sino me equivoco. La cuestión es que yo lo desinstale en estos días y me di cuenta de que códigos de música como este que dejaré abajo, dejan de funcionar, es decir ya no se visualizan. Por lo que volví a instalar el Adobe Flash Player para verlo, no sé si pasa eso con otros códigos o solo con este, pero me gustaría saber si hay una solución o alternativa a este programa.

Código:

<object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_mini.swf" width="500" height="12"> <param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_mini.swf"><param name="bgcolor" value="0E244F"> <param name="FlashVars" value="mp3=https://a.tumblr.com/tumblr_nw43b0D3IP1uimde2o1.mp3"></object>

Hola hola:

Imagino que el hecho de que el Flash ya no funcione en los navegadores modernos va a afectar, un poco lógicamente, a todos aquellos códigos que necesiten utilizar este lenguaje xD Y a no ser que quieras hacer que los usuarios se instalen extensiones de navegador o el flash como tal, hace falta buscar alternativas.

Por suerte, el HTML5, que viene a reemplazar al Flash en muchas sino todas de sus antiguas funciones, tiene una solución bastante directa: un elemento <​audio​>, que hace lo mismo que el código que has puesto pero incluso con menos caracteres:

Código:


<audio controls>
 <source src="https://a.tumblr.com/tumblr_nw43b0D3IP1uimde2o1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Sin embargo, parece que modificarles la apariencia puede resultar un tanto problemático, según la documentación de Mozilla. Sin embargo, con un poco de ingenio estas limitaciones deberían poder salvarse; por ejemplo, si le pones al audio un opacity: 0.0001;, será prácticamente invisible pero todavía se podrá interactuar con él, un poco como esto:

Código:

<div class="audiobox"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<audio controls>
 <source src="https://a.tumblr.com/tumblr_nw43b0D3IP1uimde2o1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

<div class="play"><span class="th th-music"></span></div>
<div class="playbar"></div>

</div><style>.audiobox { width: 200px; height: 50px; overflow: hidden; position: relative; margin: 0 auto; background: linear-gradient(-145deg, #ff0084cc 0%, #ffe226cc 100%); border-radius: 5px; box-shadow: #3336 1px 1px 2px; } .audiobox audio { position: absolute; top: 0; left: -20px; transform: scale(2); transform-origin: left center; z-index: 2; opacity: 0.0001; } .audiobox .play { width: 65px; height: 50px; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; align-content: center; font-size: 28px; color: white; text-shadow: #0005 1px 1px 1px; } .audiobox .playbar { width: 130px; height: 50px; position: absolute; top: 0; right: 0; display: flex; justify-content: left; align-items: center; padding-right: 15px; } .audiobox .playbar:before { width: 85%; height: 3px; content: ""; position: absolute; display: block; border-radius: 3px; background: #fff8; box-shadow: inset #fff 35px 0 0; } .audiobox .playbar:after { content: ""; width: 10px; height: 10px; background: white; position: absolute; left: 30px; border-radius: 10px; box-shadow: #0005 1px 1px 1px; }</style>

Pero a no ser que tengas acceso a JavaScript o jQuery, estas modificaciones son puramente cosméticas y pueden quitarle interactividad al asunto xD

Muchas gracias por pasarte por mi inquietud y mostrarme estas alternativas en código

Las pondré en práctica en mi aprendizaje de códigos y arreglare los códigos que tenía con este reproductor.