HTML音频播放器正常，PHP echo输出后无法获取ID导致播放失败

看起来你遇到的问题根源在于PHP输出时没有给元素ID字符串添加引号，导致JS调用play()函数时把player当成了变量，而不是元素ID的字符串，自然找不到对应的audio元素。

问题出在哪？ #

你的PHP代码里是这么写的：

onclick="play('.$playerName.')"

因为$playerName的值是'player'，PHP输出后会变成：

onclick="play(player)"

浏览器会把这里的player当作一个JS变量，但你并没有定义这个变量，所以调用document.getElementById(player)时就会失败，音频自然无法播放。

修正方案（三种可选） #

1. 手动添加单引号

在PHP拼接时，给$playerName加上转义的单引号，确保输出后是字符串形式：

if ($sObj->get('audio') != null) {
    $sAudio = $sObj->get('audio');
    $audioURL = $sAudio->getURL();
    $playerName = 'player';
    echo '
    <audio id="player" ontimeupdate="updateTime()" src="'.$audioURL.'"></audio>
    <a class="btn btn-primary btn-round" id="songPlay" onclick="play(\''.$playerName.'\')">播放</a>';
}

这样输出后，onclick会变成play('player')，正确传递字符串ID给JS函数。

2. 用json_encode安全转义

如果$playerName可能包含特殊字符（比如引号、空格），用json_encode是更稳妥的方式，它会自动处理字符串的转义：

echo '
<audio id="player" ontimeupdate="updateTime()" src="'.$audioURL.'"></audio>
<a class="btn btn-primary btn-round" id="songPlay" onclick="play('.json_encode($playerName).')">播放</a>';

json_encode('player')会输出"player"，所以最终onclick是play("player")，同样能正确工作。

3. 直接在JS函数中获取元素（更简单）

既然你的audio元素ID是固定的player，完全可以不用传递参数，直接在play()函数里通过ID获取元素：

function play() {
    const audioPlayer = document.getElementById('player');
    audioPlayer.play();
}

然后PHP里的onclick改成：

onclick="play()"

这种方式避免了参数传递的问题，代码更简洁。

额外提示 #

如果你的updateTime()函数也涉及操作这个audio元素，最好也用同样的方式确保能正确获取到元素哦。

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