ES6 - 多媒体

ES6 - 多媒体处理

现代 Web 开发在嵌入和控制音频和视频等多媒体内容方面严重依赖于 HTML5。旧的依赖浏览器插件（例如，navigator.plugins，用于 Flash 的 <embed>）的方法由于安全问题和缺乏浏览器支持而被废弃且不再相关（Flash 已停止支持）。

本章重点介绍如何使用 HTML5 <audio> 和 <video> 元素及其 JavaScript API 进行多媒体操作。

HTML5 音频和视频元素

<audio> 和 <video> 标签提供了一种将媒体嵌入网页的标准方式。它们支持各种属性用于基本控制和配置。

<audio controls src="path/to/your/audio.mp3">
  Your browser does not support the audio element.
</audio>

<video controls width="320" height="240" src="path/to/your/video.mp4">
  Your browser does not support the video tag.
</video>

常用属性包括：

src：媒体文件的 URL。
controls：显示浏览器默认控制（播放/暂停、音量等）。
autoplay：自动开始播放媒体（常受浏览器限制）。
loop：媒体结束时重复播放。
muted：默认静音音频。
width 和 height：视频尺寸。
preload：向浏览器提示预加载文件的程度（‘none’、‘metadata’、‘auto’）。

使用 JavaScript 控制多媒体

真正的强大之处在于使用 JavaScript 与这些元素进行交互。HTMLMediaElement（<audio> 和 <video> 的接口）提供了丰富的 API。

示例：自定义音频播放器控制

让我们为音频元素创建简单的自定义播放、暂停和音量控制。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Audio Controls</title>
    <style>
        .controls button, .controls input { margin: 5px; }
    </style>
</head>
<body>
    <h2>Custom Audio Player</h2>
    <audio id="myAudio" src="https://www.w3schools.com/tags/horse.ogg">
        Your browser does not support the audio element.
    </audio>

    <div class="controls">
        <button id="playBtn">Play</button>
        <button id="pauseBtn">Pause</button>
        <button id="stopBtn">Stop & Reset</button>
        <label for="volumeCtrl">Volume:</label>
        <input type="range" id="volumeCtrl" min="0" max="1" step="0.1" value="1">
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const myAudio = document.getElementById('myAudio');
            const playBtn = document.getElementById('playBtn');
            const pauseBtn = document.getElementById('pauseBtn');
            const stopBtn = document.getElementById('stopBtn');
            const volumeCtrl = document.getElementById('volumeCtrl');

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

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

            stopBtn.addEventListener('click', () => {
                myAudio.pause();
                myAudio.currentTime = 0; // 重置到开头
            });

            volumeCtrl.addEventListener('input', () => {
                myAudio.volume = volumeCtrl.value;
            });

            // Update UI based on media events
            myAudio.addEventListener('play', () => {
                console.log('Audio started playing.');
            });

            myAudio.addEventListener('pause', () => {
                console.log('Audio paused.');
            });

            myAudio.addEventListener('volumechange', () => {
                console.log('Volume changed to: ' + myAudio.volume);
                volumeCtrl.value = myAudio.volume; // 如果被浏览器控件改变，则同步
            });
        });
    </script>
</body>
</html>

预期行为：

这个 HTML 页面将显示一个没有默认控制的音频播放器，但带有自定义的播放、暂停、停止和重置按钮以及音量滑块。与这些自定义控制交互将使用 JavaScript 控制音频播放。控制台消息将指示播放状态变化和音量调整。

HTMLMediaElement 的关键 JavaScript API：

属性：

currentTime：获取或设置当前播放时间（秒）。
duration：媒体总时长（秒，未知则为 NaN）。
paused：布尔值，播放暂停时为 true。
ended：布尔值，播放结束时为 true。
volume：播放音量（0.0 到 1.0）。
muted：布尔值，音频静音时为 true。
src：获取或设置媒体源。

方法：

play()：开始或恢复播放。
pause()：暂停播放。
load()：重置媒体元素并重新加载源。

事件：

play、pause、ended、timeupdate（当 currentTime 变化时触发）、volumechange、loadeddata、error 等。可以使用 addEventListener 监听这些事件。

高级多媒体：Web Audio API

对于更复杂的音频处理、合成或分析（例如创建音效、可视化或带有丰富音频的游戏），Web Audio API 提供了一个强大而通用的系统来控制 Web 上的音频。它允许您生成音频、添加效果、创建空间音频等等。学习 Web Audio API 是一个更高级的主题，超出基本多媒体嵌入的范围。有关更多详情，请参阅 MDN Web Audio API 文档。