feat: Add audio to meditations 🎧

[JustinhSE]

Overview

Enhance the meditation functionality by adding audio playback support. Meditations are currently displayed as cards grouped by categories, with their data stored directly in the code (e.g., as a local array or object). This enhancement will allow users to listen to guided audio for each meditation.

• Meditation Model and UI: Located in src/pages/Meditations.tsx.
• Sample YouTube Video: I Will Remain Grateful.

Todo

• Update Meditation Data Structure:

  • Add an audioUrl field to each meditation object in the local data structure used in Meditations.tsx. Example:

    const meditations = [
      {
        id: "meditation1",
        title: "Morning Reflection",
        description: "Start your day with clarity and peace.",
        duration: 10, // in minutes
        category: "Beginner",
        imageUrl: "/images/morning-reflection.jpg",
        tags: ["morning", "peace"],
        audioUrl: "/audio/morning-reflection.mp3", // New field for audio file URL or YouTube meditation
      },
      // Other meditations...
    ];

• Store Audio Files Locally or in Public Directory:

  • Place the audio files in the public/audio folder (or another accessible directory within the project) and link them using relative paths in the audioUrl field.

• Modify Meditations.tsx:

  • Update the MeditationCard component to include an audio player (e.g., <audio> HTML tag or a React audio player library).
  • Pass the audioUrl field from the local data structure to the MeditationCard component and render the audio player dynamically.

• Implement Playback:

  • Enable the play button on the meditation card to trigger audio playback.
  • Ensure the meditation's end time dynamically matches the length of the audio/video.

——
Note: before adding audio, send a message here on which you would like to add.

[samdev193]

Audio should be free and publicly available