JS音频仅播放2秒即中断，SQL Blob转Base64音频源异常排查

你的核心问题在于PHP与JavaScript的执行时机不匹配：PHP是服务器端代码，在页面加载时就已经执行完毕，嵌入在JS函数里的PHP代码只会生成一次随机歌曲的Base64数据。之后每次调用songGenerationJS()，都是重复设置同一个音频源，这就导致了两种异常：

1. 随机歌曲仅播放片刻就停止：大概率是浏览器缓存了旧的音频状态，或是重复设置相同src时触发了音频加载逻辑异常。
2. 绑定onended事件后无限循环：因为每次播放结束后都设置同一个音频源，播放完成后又触发ended事件，陷入死循环。

正确实现方式 #

需要把随机获取歌曲的PHP逻辑做成独立的后端接口，前端通过AJAX动态请求新的歌曲数据，而非在JS里嵌入PHP代码。

1. 后端接口文件（get_random_song.php）

<?php
function generateSong() {
    // 建立数据库连接并处理连接错误
    $conn = mysqli_connect("localhost", "root", "", "radio fusionrock");
    if (!$conn) {
        die(json_encode(['error' => '数据库连接失败: ' . mysqli_connect_error()]));
    }

    // 仅查询需要的Src字段，减少数据传输量
    $req = $conn->query("SELECT Src FROM `tracks` ORDER BY RAND() LIMIT 1");
    if (!$req) {
        die(json_encode(['error' => '查询失败: ' . $conn->error]));
    }

    $song = mysqli_fetch_assoc($req); 
    $conn->close();                       
    
    return $song;
}

$song = generateSong();
if ($song) {
    echo json_encode([
        'audioData' => base64_encode($song['Src'])
    ]);
} else {
    echo json_encode(['error' => '未找到可用歌曲']);
}
?>

2. 前端JavaScript代码

function songGenerationJS() {
    const song = document.getElementById("song");
    
    // 请求后端接口获取新的随机歌曲
    fetch('get_random_song.php')
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error(data.error);
                return;
            }
            
            // 重置音频状态，避免缓存干扰
            song.pause();
            song.currentTime = 0;
            song.src = `data:audio/mp3;base64,${data.audioData}`;
            song.load(); // 强制加载新的音频资源
            song.play().catch(err => {
                console.error('自动播放失败:', err);
                // 可在此处添加用户提示，比如引导手动点击播放
            });
        })
        .catch(err => console.error('获取歌曲失败:', err));
}

// 绑定播放结束事件，自动切换下一首
document.getElementById("song").addEventListener('ended', songGenerationJS);

// 页面加载完成后自动播放第一首歌曲
window.addEventListener('DOMContentLoaded', songGenerationJS);

额外优化建议 #

• 若音频文件较大，不建议用Base64传输：Base64会让文件体积增加约33%，可以改为在数据库存储音频文件的服务器路径，后端直接返回文件URL（如src="audio/xxx.mp3"），性能会更优。
• 数据库连接可考虑使用持久化连接，避免频繁创建/关闭连接的开销。

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