Back
Creating a Symphony with a Flute Button
Experience an enchanting musical adventure with a button inspired by the melodious flute that plays a unique note with every click.
Component Explanation
Symphony Flute Button Tutorial
HTML
In this tutorial segment, we'll outline the basic structure of our symphony flute button using HTML. This button, upon interaction, will provide both a visual change and a unique auditory response.
<div class="symphony-section">
<button aria-label="Flute Play Button" onclick="playSymphony()" class="symphony-flute-button">
<span class="flute-note">♪</span>
</button>
</div>
We use a <div> to center the button and a <button> element for interactivity, complete with an aria-label for accessibility.JavaScript
The JavaScript part of this project makes the button alive, changing the note displayed and played upon each click.
const notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
let currentNote = 0;
function playSymphony() {
const fluteButton = document.querySelector('.symphony-flute-button');
currentNote = (currentNote + 1) % notes.length;
fluteButton.querySelector('.flute-note').textContent = notes[currentNote];
fluteButton.style.transform = `translateY(${Math.random() * 10 - 5}px)`;
new Audio(`https://www.soundjay.com/button/sounds/button-${notes[currentNote]}.mp3`).play();
}
Our script defines musical notes and uses playSymphony() to cycle through them, visually updating the button and playing a sound.CSS
Let's add elegance to our UI with CSS. The design uses glassmorphism for a modern, translucent look, highlighting tactile feedback on interaction.
.symphony-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.symphony-flute-button {
padding: 20px 40px;
border: 2px solid #6a5acd;
border-radius: 25px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: #6a5acd;
font-size: 24px;
font-weight: bold;
transition: transform 0.3s;
cursor: pointer;
}
.symphony-flute-button:focus {
outline: none;
box-shadow: 0 0 10px #6a5acd;
}
Our styles ensure the button is sleek, reactive, and maintains a clear focus state.
With these steps, we've constructed a delightful symphony gun-button that not only achieves elegance but also orchestrates an auditory treat.Whole code
<div class="symphony-section">
<button aria-label="Flute Play Button" onclick="playSymphony()" class="symphony-flute-button">
<span class="flute-note">♪</span>
</button>
</div>
<script>
const notes = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
let currentNote = 0;
function playSymphony() {
const fluteButton = document.querySelector('.symphony-flute-button');
currentNote = (currentNote + 1) % notes.length;
fluteButton.querySelector('.flute-note').textContent = notes[currentNote];
fluteButton.style.transform = `translateY(${Math.random() * 10 - 5}px)`;
new Audio(`https://www.soundjay.com/button/sounds/button-${notes[currentNote]}.mp3`).play();
}
</script>
<style>
.symphony-section {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.symphony-flute-button {
padding: 20px 40px;
border: 2px solid #6a5acd;
border-radius: 25px;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
color: #6a5acd;
font-size: 24px;
font-weight: bold;
transition: transform 0.3s;
cursor: pointer;
}
.symphony-flute-button:focus {
outline: none;
box-shadow: 0 0 10px #6a5acd;
}
</style>
Thank you for reading this article.
Comments