Back

Designing a Harmonic Melodic Mood Toggle Button

Discover the creation of a sound-responsive toggle button that transforms appearance with melodious transitions as it toggles between tranquil and invigorating states.

Component Explanation

Crafting a Melodic Mood Toggle Button with Sound and Color

Introduction

Welcome to an innovative tutorial where we explore the musically infused realm of UI components with our Melodic Mood Toggle Button. This unique component toggles between different emotional states, both visually and sonically, using a blend of colors and accompanying sounds.

HTML Structure Explained

Let’s start by understanding the basic HTML structure needed to power our toggle button.

<div class="melody-container">
  <button onclick="toggleMelody()" class="mood-button" aria-label="Toggle melodic mood">
    <span class="mood-state">Calm</span>
  </button>
  <audio id="moodSound" aria-hidden="true">
    <source src="https://web.archive.org/meadow-calm.mp3" type="audio/mpeg">
    <source src="https://web.archive.org/meadow-vibrant.mp3" type="audio/mpeg">
  </audio>
</div>

The main element serves as a container that keeps our button and audio element centered on the page. The button is our interactive element with some accessible features, like an ARIA label, that describes its function.

The CSS Magic

Weave visual enchantment with CSS to define two distinct mood states. We use linear gradients to smoothly transition the background colors and add shadow effects to enhance the visual quality.

.melody-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.mood-button {
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.5s, transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(135,206,235,0.9), rgba(64,224,208,0.9));
  box-shadow: 0 0 10px rgba(135,206,235,0.6);
}
.mood-button:focus {
  outline: none;
  box-shadow: 0 0 12px rgba(255,255,255,0.8);
}
.vibrant-mood {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255,69,0,0.7), 0 0 20px rgba(255,140,0,0.7);
}

Even the button’s focus state has been styled to ensure an easily noticeable outline, improving accessibility by enhancing the button’s visibility when navigated via keyboard.

Creating Interactivity with JavaScript

The heart of this component lies in its JavaScript, which dynamically toggles the button’s state between Calm and Vibrant. It manipulates both the visual aspects and plays different sounds based on the current state.

let isCalm = true;
function toggleMelody() {
  const button = document.querySelector('.mood-button');
  const stateText = document.querySelector('.mood-state');
  const moodSound = document.getElementById('moodSound');
  isCalm = !isCalm;
  if (isCalm) {
    button.style.background = "linear-gradient(135deg, rgba(135,206,235,0.9), rgba(64,224,208,0.9))";
    stateText.textContent = "Calm";
    button.classList.remove('vibrant-mood');
    moodSound.src = "https://web.archive.org/meadow-calm.mp3";
  } else {
    button.style.background = "linear-gradient(135deg, rgba(255,69,0,0.9), rgba(255,140,0,0.9))";
    stateText.textContent = "Vibrant";
    button.classList.add('vibrant-mood');
    moodSound.src = "https://web.archive.org/meadow-vibrant.mp3";
  }
  moodSound.play();
}

This function toggles the state by tracking a boolean value, applying appropriate styles and playing corresponding audio clips. It skillfully combines colors and sounds to create an engaging and experimental user experience.

Conclusion

In this tutorial, we've created an interactive toggle button that visually and audibly shifts between moods. Employing accessibility and inclusive design principles, we crafted a component blending aesthetic delight with functional sound dynamics to enrich the user's interaction.

Whole code

<div class="melody-container">
  <button onclick="toggleMelody()" class="mood-button" aria-label="Toggle melodic mood">
    <span class="mood-state">Calm</span>
  </button>
  <audio id="moodSound" aria-hidden="true">
    <source src="https://web.archive.org/meadow-calm.mp3" type="audio/mpeg">
    <source src="https://web.archive.org/meadow-vibrant.mp3" type="audio/mpeg">
  </audio>
</div>


<script>
let isCalm = true;
function toggleMelody() {
  const button = document.querySelector('.mood-button');
  const stateText = document.querySelector('.mood-state');
  const moodSound = document.getElementById('moodSound');
  isCalm = !isCalm;
  if (isCalm) {
    button.style.background = "linear-gradient(135deg, rgba(135,206,235,0.9), rgba(64,224,208,0.9))";
    stateText.textContent = "Calm";
    button.classList.remove('vibrant-mood');
    moodSound.src = "https://web.archive.org/meadow-calm.mp3";
  } else {
    button.style.background = "linear-gradient(135deg, rgba(255,69,0,0.9), rgba(255,140,0,0.9))";
    stateText.textContent = "Vibrant";
    button.classList.add('vibrant-mood');
    moodSound.src = "https://web.archive.org/meadow-vibrant.mp3";
  }
  moodSound.play();
}
</script>

<style>
.melody-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.mood-button {
  border: none;
  padding: 15px 30px;
  border-radius: 50px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  transition: background 0.5s, transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(135,206,235,0.9), rgba(64,224,208,0.9));
  box-shadow: 0 0 10px rgba(135,206,235,0.6);
}
.mood-button:focus {
  outline: none;
  box-shadow: 0 0 12px rgba(255,255,255,0.8);
}
.vibrant-mood {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(255,69,0,0.7), 0 0 20px rgba(255,140,0,0.7);
}

</style>

Thank you for reading this article.

Designing a Harmonic Melodic Mood Toggle Button

Component Explanation

Crafting a Melodic Mood Toggle Button with Sound and Color

Introduction

HTML Structure Explained

The CSS Magic

Creating Interactivity with JavaScript

Conclusion

Whole code

Comments

More toggle-buttons

Similar

See also