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>

Creating a Symphony with a Flute Button

Component Explanation

Symphony Flute Button Tutorial

HTML

JavaScript

CSS

Whole code

Comments

More buttons

Similar

See also