Audio button
How do I make an audio button?
Funny silly sound effects based http://codepen.io/dudleystorey/pen/zqgGn. What is a audio button? How do you make a audio button? This script and codes were developed by Dima on 17 September 2022, Saturday.
Audio button - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>audio button</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="test"> <div class="snowflake sf1">💵</div> <div class="snowflake sf2">💵</div> <div class="snowflake sf3">💵</div> <div class="snowflake sf4">💵</div> <div class="snowflake sf5">💵</div> <div class="snowflake sf6">💵</div> <div class="snowflake sf7">💵</div> <div class="snowflake sf8">💵</div>
</div>
<audio src="http://songily.com/new/file/70963897.mp3" preload="auto"></audio>
<img id="gif" src="//zupra.github.io/test/dance.gif" alt="">
<button id="everybodydance">
GO
</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Audio button - Script Codes CSS Codes
html, body { height: 100%; min-height: 400px; font-size: 150%; overflow: hidden;
}
/* body font-size: 250%; position: relative; overflow: hidden; height: 100vh; */
button, #gif{ position: absolute; top: 50%; left:50%; transform: translate(-50%, -100%); -webkit-transform: translate(-50%, -100%);
}
button { top: 52%; /* hide girls */ width: 260px; height: 190px; background: red; border-radius: 50%; border: none; color: white; font-family: Arial, sans-serif; font-weight: 900; font-size: 3em; text-shadow: 0 3px 1px rgba(122,17,8,.8); text-transform: uppercase; box-shadow: 0 8px 0 rgb(183,9,0), 0 15px 20px rgba(0,0,0,.35); transition: .4s all ease-in; outline: none; cursor: pointer; text-align: center;
}
.pressed { transform: translate(-50%, 0); box-shadow: 0 4px 0 rgb(183,0,0), 0 8px 6px rgba(0,0,0,.45);
}
.snowflake { position: absolute; z-index: 10; top: -40px; color: #fff; font-size: 2em; animation-name: fall, fade, spin1; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-in;
}
.snowflake.sf1 { left: 8vw; animation-duration: 5s;
}
.snowflake.sf2 { font-size: 1.8em; left: 22vw; animation-duration: 7s;
}
.snowflake.sf3 { left: 35vw; animation-duration: 8s;
}
.snowflake.sf4 { font-size: 1.5em; left: 48vw; animation-duration: 6s;
}
.snowflake.sf5 { left: 56vw; animation-duration: 5s;
}
.snowflake.sf6 { font-size: 1.8em; left: 72vw; animation-duration: 7s;
}
.snowflake.sf7 { left: 80vw; animation-duration: 8s;
}
.snowflake.sf8 { font-size: 1.5em; left: 96vw; animation-duration: 6s;
}
@-webkit-keyframes spin1 { 0% { transform: rotate(-180deg) translate(0px, 0px); } 100% { transform: rotate(180deg) translate(10px, 75px); }
}
@keyframes spin1 { 0% { transform: rotate(-180deg) translate(0px, 0px); } 100% { transform: rotate(180deg) translate(10px, 75px); }
}
@-moz-keyframes fade { 0% { opacity: 0; } 10% { opacity: 0.8; } 100% { opacity: 0; }
}
@-webkit-keyframes fade { 0% { opacity: 0; } 10% { opacity: 0.8; } 100% { opacity: 0; }
}
@keyframes fade { 0% { opacity: 0; } 10% { opacity: 0.8; } 100% { opacity: 0; }
}
@-moz-keyframes fall { from { top: 10px; } to { top: 90vh; }
}
@-webkit-keyframes fall { from { top: 10px; } to { top: 90vh; }
}
@keyframes fall { from { top: 10px; } to { top: 90vh; }
}
Audio button - Script Codes JS Codes
(function() { var music = $("audio")[0], dance = $("#everybodydance"), flag = true; function unpress() { dance.removeClass("pressed"); music.pause(); }; function playSound() { dance.addClass("pressed"); music.currentTime = 0; music.play(); //GO if (flag) { setTimeout(unpress, 4400); // first click flag = false; } else { setTimeout(unpress, 69000); // length of song }; }; dance.click(function() { if ($(this).is('.pressed')) { unpress(); return; } playSound(); });
}());
Developer | Dima |
Username | dimaZubkov |
Uploaded | September 17, 2022 |
Rating | 3 |
Size | 2,784 Kb |
Views | 32,384 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Vue cart | 4,497 Kb |
Price range slider | 3,589 Kb |
Ken Burns Effect | 3,067 Kb |
Responsive typography harmony | 4,090 Kb |
Codrops HoverEffectIdeas | 14,526 Kb |
Glitch | 3,368 Kb |
Star Rating | 2,819 Kb |
Web Audio API | 3,946 Kb |
A Pen by Dima | 3,031 Kb |
Section Slides | 5,312 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Voting App - register | MatheusLima92 | 1,948 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
Simple CSS loader. | Cabrera | 2,574 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Animated skewed panes | NyX | 4,462 Kb |
Infractions - Attitude | Kylie_Joseph | 7,672 Kb |
Slider | Mohammed-fawzy | 2,634 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!