Introduction:

Preview:

Your Text

In this article, we will explore a code snippet that allows you to create a visually appealing audio player with animated text using HTML and JavaScript. The code utilizes CSS styles, background images, and JavaScript event listeners to create an interactive audio player that can play and pause audio tracks. Let’s dive into the code and understand how it works.

HTML Structure:

The code begins with the HTML structure, enclosed within the <html> tags. Inside the <body> tags, we have the following elements:

Animated Text: The <div> element with the class name “big-letters” represents the animated text. It uses CSS properties to adjust the font size, font weight, and background image. The background image can be replaced with your desired image URL or a GIF.
Play Button: The <button> element with the class name “play-button” represents the play/pause button for the audio player. It uses CSS styles to set the button size, background image, and cursor type.
Audio Player: The <audio> element with the ID “audioPlayer” defines the audio player. Inside the <audio> element, there is a <source> element that specifies the audio source file (“supermodel.mp3”). You can replace this file with your own audio file in the MP3 format.

<div id="bgclor">
  <div class="big-letters">Your Text</div>

  <button class="play-button"></button>

  <audio id="audioPlayer">
    <source src="supermodel.mp3" type="audio/mpeg">
  </audio>
</div>

CSS Styling:

The <style> tags contain CSS rules that style the elements in the HTML code. Let’s break down the CSS styles used:

.big-letters: This class is applied to the animated text <div>. It sets the font size, font weight, display type, background image, background repeat behavior, object-fit, and enables the text to have a transparent fill color. Additionally, an animation called “shadow-animation” is applied to create a shadow effect.
@keyframes shadow-animation: This rule defines the keyframes for the “shadow-animation” animation. It specifies the text shadow at different stages of the animation. At 0%, there is no shadow; at 50%, the shadow intensity increases, and at 100%, the shadow resets.
.play-button: This class is applied to the play button <button>. It sets the width, height, background image, background size, background position, border, and cursor type.

 .big-letters {
      font-size: 420px; /* Adjust the font size to make the letters bigger */
      font-weight: 900;
      display: inline-block;
      background-image: url('https://t4.ftcdn.net/jpg/02/59/73/73/360_F_259737328_RIlTbe7EgSgz00SviZJOMWR7yZtcrva8.jpg'); /* Replace 'your_image.jpg' with your actual image URL */
      background-image: url('giphy.gif');
      background-repeat: inherit; /* Adjust the background-repeat property as per your requirements */
      object-fit: cover;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: shadow-animation 2s ease-in-out infinite; /* Add the animation property */
    }

    @keyframes shadow-animation {
      0% {
        text-shadow: 0 0 0 rgba(224, 102, 224, 0.3); 
      }
      50% {
        text-shadow: 0 0 20px rgba(255, 6, 176, 0.113); 
      }
      100% {
        text-shadow: 0 0 0 rgba(115, 32, 122, 0.3); 
      }
    }
    .play-button {
      width: 60px;
      height: 60px;
      background-image: url('1.png'); /* Replace with your own image */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border: none;
      cursor: pointer;
      background-color: #0ff0;
    }

    #bgclor{
        background-color: white;
    }

👉 Test Your Code Here 👈

JavaScript Functionality:

The <script> tags contain JavaScript code that adds functionality to the play button. Here’s how it works:

JavaScript variables are declared to store references to the audio player and play button elements using document.getElementById() and document.querySelector() methods.
An event listener is added to the play button using the addEventListener() method. The listener waits for a “click” event.
Inside the event listener function, a conditional statement checks whether the audio player is paused (audio.paused). If it is paused, the audio.play() method is called to play the audio, and the play button’s background image is updated to a pause button image. If the audio is already playing, the audio.pause() method is called to pause the audio, and the play button’s background image is updated to a play button image.

var audio = document.getElementById('audioPlayer');
    var playButton = document.querySelector('.play-button');

    playButton.addEventListener('click', function() {
      if (audio.paused) {
        audio.play();
        playButton.style.backgroundImage = 'url("2.png")'; // Replace with your own pause button image
      } else {
        audio.pause();
        playButton.style.backgroundImage = 'url("1.png")'; // Replace with your own play button image
      }
    });

Conclusion:

👉 Test Your Code Here 👈

By combining HTML, CSS, and JavaScript, you can create an attractive audio player with animated text on your web page. This code snippet allows users to play and pause an audio track by clicking the play button, with the button’s appearance changing accordingly. Feel free to customize the code by replacing the background images, audio file, and adjusting the styling to match your preferences. With this knowledge, you can enhance your web projects with visually appealing audio players.

Blog

Free Tools

Unleash Your Web’s Vibe: The Mind-Blowing Audio Player with Dazzling Animated Text!