Guitar - Interactive Musical Experience with SVG and GSAP

Introduction 🤗

Welcome to my latest web development project where creativity meets technology! I've recently embarked on a fascinating journey to combine visual animation with audio interaction, resulting in an engaging musical experience on the web. This blog post will walk you through the process of creating interactive SVG animations that respond to user actions and play sounds, using GSAP and HTML5 audio.

The Concept 🧠

The inspiration for this project comes from Guitar (musical instruments). The goal was to create virtual strings on a web page that users could "pluck" with their mouse, visually deforming the strings and playing corresponding notes.

Tools and Technologies 🛠

• GSAP (GreenSock Animation Platform): A powerful JavaScript library for creating high-performance animations.
• HTML5 Audio: For playing sound files in response to user interactions.
• SVG (Scalable Vector Graphics): For creating and animating the string visuals.

Setting Up the Project 📐

First, we define the initial and final paths for the SVG strings. Each string is represented as a quadratic Bezier curve in SVG.

let initialPath = "M 0 30 Q 500 30 1000 30";
let finalPath = "M 0 30 Q 500 30 1000 30";
const sounds = ["A", "B", "C", "D", "E", "G"];
let audioElements = [];

We pre-initialize audio elements for each note, ensuring they are ready to play after user interaction:

for (let index = 1; index <= 6; index++) {
    let audio = new Audio(`./sound/${sounds[index - 1]}.mp3`);
    audioElements.push(audio);
}

Animating the Strings

Using GSAP, we animate the SVG path of each string based on mouse movements:

for (let index = 0; index < 6; index++) {
    let audio = new Audio(`./sound/${sounds[index]}.mp3`);
    audioElements.push(audio);
}
for (let index = 1; index <= 6; index++) {
    let string = document.querySelector(`#string${index}`);
    let cord = string.getBoundingClientRect();
    string.addEventListener("mousemove", (event) => {
        console.log("play")
        let initialPath = `M 0 30 Q ${event.clientX - cord.left} ${event.clientY - cord.top} 1000 30`;
        gsap.to(`#string${index} svg path`, {
            attr: { d: initialPath },
            duration: 0.3,
            ease: "power3.out"
        });
    });
    string.addEventListener("mouseleave", () => {
        audioElements[index-1].currentTime =2;
        audioElements[index-1].play()
        gsap.to(`#string${index} svg path`, {
            attr: { d: finalPath }, 
            duration: 0.8,
            ease: "elastic.out(1,0.1)"
        });
    });
}

Conclusion 💭

This project demonstrates the seamless integration of visual and auditory elements on a web page, creating an interactive and engaging user experience. By leveraging GSAP for animations and HTML5 audio for sound playback, we can build sophisticated and responsive web applications.

I hope this walkthrough has inspired you to experiment with SVG animations and audio interactions in your projects. Feel free to reach out with any questions or share your own creations!

LIVE DEMO: Guitar - Interactive Musical Experience
GitHub: github.com/iam-sarthak/guitar

👋Connect with Me

If you enjoyed this project, follow me on LinkedIn for more updates and insights into web development and interactive design.

Happy coding! 😊