Grindhouse

Project Title: “Grindhouse Audio Experience: Interactive Media Control with Media Session API”

Description:

In this project, we blend the gritty and intense atmosphere of Grindhouse with the interactive capabilities of the Media Session API. Grindhouse is a double feature film presenting two full-length feature movies written by Quentin Tarantino and Robert Rodriguez. Your task is to create an immersive audio experience that allows users to control media playback through an interactive interface, inspired by the grindhouse cinema style.

Features:

1. Interactive Media Control: Use the Media Session API to provide custom media controls and metadata for audio playback.
2. Cinematic Experience: Create an audio experience that mimics the grindhouse cinema style, complete with sound effects and background scores.
3. Custom Actions: Implement custom actions such as play, pause, skip, and seek, allowing users to interact with the media seamlessly.

Starting Code:

Beginner Hints:

• Create a single index.html file.
• Copy the full HTML code block into that file.
• Open index.html in your browser. If something doesn’t work, try a local server like python -m http.server.
• Open DevTools Console to spot errors and typos quickly.

Here’s a basic setup to get you started. This includes the initial HTML, CSS, and JavaScript to integrate the Media Session API and create an interactive media control experience.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grindhouse Audio Experience</title>
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 20px;
    }

    h1 {
        color: #ff6347;
    }

    audio {
        width: 100%;
        max-width: 600px;
        margin-top: 20px;
    }

    #controls {
        margin-top: 20px;
    }

    button {
        background-color: #ff6347;
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
        margin: 5px;
    }
</style>
</head>
<body>
    <h1>Grindhouse Audio Experience</h1>
    <p>Control your audio experience with custom media controls!</p>
    <audio id="audioPlayer" controls>
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <div id="controls">
        <button id="playBtn">Play</button>
        <button id="pauseBtn">Pause</button>
        <button id="skipBtn">Skip</button>
    </div>
<script>
    const audioPlayer = document.getElementById('audioPlayer');
    const playBtn = document.getElementById('playBtn');
    const pauseBtn = document.getElementById('pauseBtn');
    const skipBtn = document.getElementById('skipBtn');

    playBtn.addEventListener('click', () => {
        audioPlayer.play();
    });

    pauseBtn.addEventListener('click', () => {
        audioPlayer.pause();
    });

    skipBtn.addEventListener('click', () => {
        audioPlayer.currentTime += 10; // Skip forward 10 seconds
    });

    if ('mediaSession' in navigator) {
        navigator.mediaSession.metadata = new MediaMetadata({
            title: 'Grindhouse Track',
            artist: 'Various Artists',
            album: 'Grindhouse Soundtrack',
            artwork: [
                { src: 'https://upload.wikimedia.org/wikipedia/en/7/7b/Grindhouse_%282007%29.png', sizes: '512x512', type: 'image/png' }
            ]
        });

        navigator.mediaSession.setActionHandler('play', () => { audioPlayer.play(); });
        navigator.mediaSession.setActionHandler('pause', () => { audioPlayer.pause(); });
        navigator.mediaSession.setActionHandler('seekforward', () => { audioPlayer.currentTime += 10; });
        navigator.mediaSession.setActionHandler('seekbackward', () => { audioPlayer.currentTime -= 10; });
        navigator.mediaSession.setActionHandler('previoustrack', () => { audioPlayer.currentTime = 0; });
        navigator.mediaSession.setActionHandler('nexttrack', () => { audioPlayer.currentTime = audioPlayer.duration; });
    }
</script>
</body>
</html>

References:

• Grindhouse (2007):
  • Wikipedia
• Media Session API:
  • MDN Web Docs

Praise Cage! Embark on this coding adventure and create an interactive audio experience that captures the essence of grindhouse cinema, utilizing the powerful Media Session API for seamless media control.