Last active
November 24, 2023 09:49
-
-
Save madila/3101bc4b6233e1ed7c7265b152658d27 to your computer and use it in GitHub Desktop.
Invisible audio play after first click
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| <style> | |
| html, body { | |
| margin: 0; | |
| } | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| } | |
| audio { | |
| display: none; | |
| } | |
| .invisible-embed { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| margin: 0; | |
| } | |
| .embed__volume-button { | |
| background-color: rgba(0,0,0,0.5); | |
| position: absolute; | |
| top: 1rem; | |
| left: 1rem; | |
| padding: 0.5rem; | |
| display: flex; | |
| justify-content: center; | |
| border-radius: 999px; | |
| border: 0; | |
| cursor: pointer; | |
| } | |
| .embed__volume-button:hover, .embed__volume-button:active { | |
| background-color: rgba(0,0,0,1); | |
| } | |
| .embed__volume-button svg { | |
| width: 2rem; | |
| height: 2rem; | |
| display: block; | |
| } | |
| .embed__volume-button.embed__button-muted .path-wave { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <figure class="invisible-embed"> | |
| <audio preload controls src="https://rubenmadila.com/wp-content/uploads/2023/07/Nothing-will-last-forever-demo.mp3"></audio> | |
| <button class="embed__volume-button embed__button-muted"> | |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="500" height="500" viewBox="0 0 75 75"> | |
| <path class="path-speaker" d="M39.389,13.769 L22.235,28.606 L6,28.606 L6,47.699 L21.989,47.699 L39.389,62.75 L39.389,13.769z" style="stroke:#fff;stroke-width:5;stroke-linejoin:round;fill:#fff;"></path> | |
| <path class="path-wave" d="M48,27.6a19.5,19.5 0 0 1 0,21.4M55.1,20.5a30,30 0 0 1 0,35.6M61.6,14a38.8,38.8 0 0 1 0,48.6" style="fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round"></path> | |
| </svg> | |
| </button> | |
| </figure> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', async function() { | |
| const audioEmbed = document.querySelector('.invisible-embed'); | |
| const audio = audioEmbed.querySelector('audio'); | |
| const tryVolume = async function(e) { | |
| try { | |
| audio.volume = 1; | |
| await audio.play(); | |
| soundButton.classList.remove('embed__button-muted'); | |
| } catch(e) { | |
| soundButton.classList.add('embed__button-muted'); | |
| } | |
| } | |
| audio.addEventListener('canplay', tryVolume); | |
| const soundButton = audioEmbed.querySelector('.embed__volume-button'); | |
| const toggleVolume = function(e) { | |
| e.preventDefault(); | |
| if(audio.volume) { | |
| soundButton.classList.add('embed__button-muted'); | |
| audio.volume = 0; | |
| } else { | |
| soundButton.classList.remove('embed__button-muted'); | |
| audio.volume = 1; | |
| } | |
| }; | |
| soundButton.addEventListener('click', toggleVolume); | |
| window.addEventListener('click', async function() { | |
| await audio.play(); | |
| soundButton.classList.remove('embed__button-muted'); | |
| audio.volume = 1; | |
| }, { once: true }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment