如何在网页中正确引用本地音视频文件-html教程-PHP中文网

如何在网页中正确引用本地音视频文件

本文详解为何直接使用本地绝对路径（如 c://users//...）无法在网页中播放音视频，以及如何通过相对路径或 url 方式正确加载本地媒体资源。

本文详解为何直接使用本地绝对路径（如 c://users//...）无法在网页中播放音视频，以及如何通过相对路径或 url 方式正确加载本地媒体资源。

在 Web 开发中，浏览器出于安全策略限制，不允许直接通过 file:// 协议或本地绝对路径（如 C://Users//...）加载 。你代码中的这行：

let audioElement = new Audio('C://Users//ADMIN//Desktop//Web development_new//HTML_CSS//Project_spotify//data//PhotoGraph.mp3');

虽然路径在操作系统中真实存在，但浏览器会拒绝加载，并可能在控制台报错（如 Not allowed to load local resource 或 DOMException: The element has no supported sources）。

✅ 正确做法是：将音视频文件放入项目目录结构中，并使用相对路径引用。例如，假设你的项目结构如下：

Project_spotify/
├── index.html
├── script.js
└── data/
    └── PhotoGraph.mp3

那么应在 JS 中改写为：

Pixelcut.ai

Pixelcut.ai是一款AI图片处理工具，AI产品背景移除和替换。

下载

let audioElement = new Audio('data/PhotoGraph.mp3'); // ✅ 相对路径（相对于当前 HTML 文件位置）

或更推荐的方式——在 HTML 中直接声明

<audio id="main-audio" preload="metadata"><source src="data/PhotoGraph.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</source></audio>

然后在 JS 中获取并操作：

const audioElement = document.getElementById('main-audio');

⚠️ 注意事项：

不要使用 C://、D:// 等 Windows 绝对路径，也不要用 file:///C:/... —— 这在现代浏览器中默认被阻止；
确保服务器环境运行（如 VS Code 的 Live Server、http-server 或本地开发服务器），而非双击打开 index.html（此时为 file:// 协议，仍可能受限）；
图片同理：比唯一可行；
若需动态加载多首歌曲，建议将媒体文件统一放在 assets/ 或 media/ 子目录下，路径保持层级清晰、可维护。