Racing With The Moon

Project Title: “Whispers of the Past: Narrated Scenes from Racing with the Moon”

Description

“Racing with the Moon” captures the essence of life on the home front during World War II, focusing on the personal stories of young love and the imminent separation caused by war. Leveraging the Web Speech API, the project “Whispers of the Past” reimagines this historical narrative by providing an interactive audio storytelling experience. Users can select scenes or dialogues from the film, which are then narrated using the text-to-speech capabilities of the Web Speech API. This application allows users to explore the emotional depth of the film through a different sensory medium, enhancing engagement through auditory storytelling.

The application will include options to adjust the voice type and speed of narration, allowing users to customize the storytelling experience to their preference. This project not only serves as an educational tool about historical narratives and film study but also provides accessibility for those who prefer auditory learning or are visually impaired.

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 the HTML, JavaScript, and some CSS to kickstart the “Whispers of the Past” project:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Whispers of the Past</title>
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f0f0f0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }

    button {
        margin: 10px;
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
    }
</style>
</head>
<body>
    <div class="controls">
        <button onclick="speakText('I remember when we raced against the moon, not knowing what the future held.')">Play Scene</button>
        <button onclick="stopSpeaking()">Stop</button>
    </div>
<script>
    function speakText(text) {
        if ('speechSynthesis' in window) {
            const speech = new SpeechSynthesisUtterance(text);
            speech.voice = speechSynthesis.getVoices().filter(voice => voice.lang === 'en-US')[0]; // Choose an English voice
            speech.pitch = 1; // Normal pitch
            speech.rate = 1; // Normal speed
            window.speechSynthesis.speak(speech);
        } else {
            alert('Web Speech API is not supported by your browser.');
        }
    }

    function stopSpeaking() {
        if ('speechSynthesis' in window) {
            window.speechSynthesis.cancel();
        }
    }
</script>
</body>
</html>

References

• For more about Racing with the Moon, visit Wikipedia: Racing with the Moon.
• Learn more about the Web Speech API and how to implement it from the MDN Web Docs.

This project enhances the storytelling experience of “Racing with the Moon” by transforming key film dialogues and scenes into an interactive, audible format, accessible to a wider audience.