HLS.js实现电台播放时，如何获取当前歌曲的标题与艺术家信息？

你之前盯着MANIFEST相关事件找数据是找错地方了——电台的歌曲元数据（标题、艺术家）一般是嵌入在音频流的ID3标签里，不是存放在m3u8播放列表文件中，所以MANIFEST_PARSED/MANIFEST_LOADED事件里根本不会有这些信息。

下面给你两种可行的实现方式：

方法一：监听HLS.js的FRAG_PARSED事件 #

每个音频分片解析完成时，HLS.js会触发这个事件，分片里的ID3元数据会包含在事件参数中。

修改你的代码，加上这个事件监听：

var audio = document.querySelector('#audio');
var url = 'https://stream.ram.radio/audio/ram.stream_aac/playlist.m3u8'

if (Hls.isSupported()) {
   var hls = new Hls();
   hls.attachMedia(audio);

    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        hls.loadSource(url);
    });

    // 新增：监听分片解析完成事件
    hls.on(Hls.Events.FRAG_PARSED, function(event, data) {
        // 检查分片是否携带ID3元数据
        if (data.frag && data.frag.id3Metadata) {
            const id3Data = data.frag.id3Metadata;
            // 提取标题（TIT2帧）和艺术家（TPE1帧）
            const title = id3Data['TIT2']?.value;
            const artist = id3Data['TPE1']?.value;
            
            if (title || artist) {
                console.log('当前播放歌曲：', { title, artist });
                // 这里可以把数据渲染到页面上
            }
        }
    });
}

方法二：监听audio元素的TextTrack字幕提示变化 #

HLS.js会自动把ID3元数据转换成WebVTT格式的TextTrack，你可以通过监听这个Track的oncuechange事件获取数据。

代码示例：

var audio = document.querySelector('#audio');
var url = 'https://stream.ram.radio/audio/ram.stream_aac/playlist.m3u8'

if (Hls.isSupported()) {
   var hls = new Hls();
   hls.attachMedia(audio);

    hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        hls.loadSource(url);
    });

    hls.on(Hls.Events.MANIFEST_PARSED, function () {
        // 找到HLS.js创建的元数据TextTrack
        const metadataTrack = audio.textTracks?.getTrackById('hls-metadata');
        if (metadataTrack) {
            metadataTrack.mode = 'hidden'; // 不需要显示在页面上，仅获取数据
            metadataTrack.oncuechange = function() {
                const activeCues = this.activeCues;
                if (activeCues.length > 0) {
                    const cue = activeCues[0];
                    // 解析cue.text里的ID3数据，格式通常是类似 "TIT2=歌曲标题;TPE1=艺术家"
                    const metadata = {};
                    cue.text.split(';').forEach(item => {
                        const [key, value] = item.split('=');
                        if (key && value) metadata[key.trim()] = value.trim();
                    });
                    
                    console.log('当前播放歌曲：', {
                        title: metadata.TIT2,
                        artist: metadata.TPE1
                    });
                }
            };
        }
    });
}

注意：不同电台的ID3标签帧可能有差异，比如有些可能用TITLE代替TIT2，ARTIST代替TPE1，如果上面的字段取不到，可以打印id3Data或者cue.text看具体格式，再调整提取逻辑。

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