🎧🎬 HTML5 Audio & Video Tags

Modern browsers support native playback of audio and video files using the <audio> and <video> elements. These tags allow developers to provide controls, preload preferences, looping behavior, and fallback content for older browsers.

---

🎵 <audio> Tag

The <audio> element embeds audio content.

Basic Example:

htmlCopy
<audio src="/media/example.mp3" controls></audio>

Example with Fallback and Multiple Sources:

htmlCopy
<audio controls preload="auto">
  <source src="/media/example.mp3" type="audio/mpeg" />
  <source src="/media/example.ogg" type="audio/ogg" />
  Your browser does not support the audio tag.
</audio>

Attributes:

• controls: Displays default play/pause UI.
• autoplay: Starts playing automatically (muted recommended for UX).
• loop: Restarts automatically when done.
• preload: Informs browser how to preload audio (none, metadata, auto).

Live Audio Example:

Custom Audio Player Example:

EQVisualizer with Dynamic Amplitude Curve

tsxCopy
"use client";

import { useEffect, useRef } from "react";

type Props = {
  analyser: AnalyserNode | null;
  dataArray: Uint8Array | null;
};

export default function EQVisualizer({ analyser, dataArray }: Props) {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (!analyser || !dataArray) return;

    const canvas = canvasRef.current;
    const ctx = canvas?.getContext("2d");
    if (!canvas || !ctx) return;

    const draw = () => {
      requestAnimationFrame(draw);
      analyser.getByteFrequencyData(dataArray);

      ctx.clearRect(0, 0, canvas.width, canvas.height);

      const barCount = 32;
      const maxIndex = 64;
      const barWidth = canvas.width / barCount;
      let x = 0;

      for (let i = 0; i < barCount; i++) {
        const logIndex = Math.floor(Math.pow(i / barCount, 2.0) * maxIndex);

        const raw = dataArray[logIndex];

        // Nonlinear amplitude curve
        const scaled = Math.pow(raw / 255, 1.8); // Try 1.5–2.5
        const barHeight = scaled * canvas.height * 0.9;

        ctx.fillStyle = `rgb(${barHeight + 80}, 40, 120)`;
        ctx.fillRect(x, canvas.height - barHeight, barWidth - 1, barHeight);
        x += barWidth;
      }
    };

    draw();
  }, [analyser, dataArray]);

  return (
    <canvas
      ref={canvasRef}
      width={300}
      height={100}
      className="rounded bg-black"
    />
  );
}

---

🎥 <video> Tag

The <video> element embeds video content.

Basic Example:

htmlCopy
<video src="/media/sample.mp4" controls width="640"></video>

Example with Multiple Sources and Poster:

htmlCopy
<video controls width="640" preload="metadata" poster="/media/poster.jpg">
  <source src="/media/sample.mp4" type="video/mp4" />
  <source src="/media/sample.webm" type="video/webm" />
  Your browser does not support the video tag.
</video>

Attributes:

• controls: Adds UI to play/pause/volume.
• autoplay: Starts playback automatically.
• loop: Repeats the video indefinitely.
• muted: Required with autoplay for most browsers.
• poster: Placeholder image before playback.
• preload: Sets how much data to preload (auto, metadata, none).

Live Video Example:

---

🛠 Best Practices

• Always provide multiple file formats for browser compatibility.
• Include fallback text for unsupported browsers.
• Use preload wisely to balance UX and bandwidth.
• Combine autoplay with muted for compliance.

---

📚 Resources

• MDN: <audio>
• MDN: <video>

Here's a ready-to-append article snippet with an embedded live video player with subtitles and the full HTML example as a code block.

---

📝 Example: <video> with Public Subtitles

Modern <video> elements support subtitles and captions via the <track> tag. This allows your users to follow dialogue or translations using external .vtt files.

🎬 Live Demo with English Subtitles:

🧩 HTML Code Example:

htmlCopy
<video
  controls
  width="640"
  poster="https://mohistory.org/molabplugins/videoviewer/sintel.jpg"
>
  <source
    src="https://mohistory.org/molabplugins/videoviewer/sintel-short.mp4"
    type="video/mp4"
  />
  <source
    src="https://mohistory.org/molabplugins/videoviewer/sintel-short.webm"
    type="video/webm"
  />

  <track
    label="English"
    kind="subtitles"
    srclang="en"
    src="http://owolf.com/captions/sintel/sintel-en.vtt"
    default
  />
  Your browser does not support HTML5 video.
</video>

📌 Notes

• This example uses public video and subtitle sources.
• Subtitles are written in WebVTT format.
• The default attribute ensures the subtitle track is auto-enabled.