如何让index.html向player.html传信息以指定播放对应音乐？

我有三个文件/文件夹：

• audios文件夹：包含若干音频文件；
• index.html：当前内容为空，初始代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

    </body>
</html>

• player文件夹：内含我开发的音乐播放器应用（player.html）。

想要实现的效果：打开index.html后，点击其中的链接，跳转到player.html并播放对应的音频。但不知道player.html如何知晓要播放哪首音频？

最初用的代码：

<a href="audios/20230119.mp3">20230119</a>

虽然能播放音频，但调用的是系统默认播放器，不是自己开发的player.html。尝试过空链接<a href=""></a>，没用。想知道需要用什么技术让index.html给player.html传歌曲信息。

最直接的方式是通过URL查询参数传递音频文件路径，player.html读取这个参数后加载对应音频。

1. 修改index.html的链接 #

把原来的音频链接改成指向player.html，并在URL末尾加上查询参数（比如audio），值为音频文件的相对路径：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>音频列表</title>
    </head>
    <body>
        <!-- 示例链接，根据实际音频文件调整路径 -->
        <a href="player/player.html?audio=../audios/20230119.mp3">20230119</a>
        <br>
        <a href="player/player.html?audio=../audios/another_song.mp3">另一首歌</a>
    </body>
</html>

注意：这里的../audios/xxx.mp3是player.html相对于音频文件的路径——因为player在player文件夹里，需要回退一级到根目录再进入audios文件夹。

2. 在player.html中读取URL参数并加载音频 #

在player.html的JavaScript代码里，获取URL中的audio参数，然后设置给音频元素：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义播放器</title>
</head>
<body>
    <!-- 假设你的播放器有一个audio元素 -->
    <audio id="audioPlayer" controls></audio>

    <script>
        // 获取URL查询参数
        const urlParams = new URLSearchParams(window.location.search);
        const audioPath = urlParams.get('audio');
        
        // 如果存在音频参数，设置给播放器
        if (audioPath) {
            const audioPlayer = document.getElementById('audioPlayer');
            audioPlayer.src = audioPath;
            // 可选：自动播放（注意浏览器可能限制自动播放，需要用户交互触发）
            // audioPlayer.play().catch(err => console.log('自动播放失败:', err));
        }
    </script>
</body>
</html>

补充说明 #

• 务必确保音频文件的相对路径正确，否则player.html会找不到音频文件；
• 浏览器对自动播放有严格限制，通常需要用户点击播放器的播放按钮才能开始播放，不要强制自动播放，避免触发报错；
• 如果需要传递更多信息（比如歌曲名、歌手），可以在URL里添加多个参数，比如?audio=../audios/xxx.mp3&title=20230119，然后用urlParams.get('title')获取对应值。

内容的提问来源于stack exchange，提问作者ascendho