hls js 从元数据获取流标题

Question

我正在使用 hls js 进行广播播放。这效果很好。我的问题是有没有办法检索当前播放的歌曲数据（标题、艺术家）？我尝试使用一些回调，例如（MANIFEST_PARSED，MANIFEST_LOADED），但没有成功找到此信息。

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 (event, data) {
        console.log(data)

   });         

    hls.on(Hls.Events.MANIFEST_LOADED, function (event, data) {
        console.log(data)
    });
}

  <audio preload="true" id="audio" controls crossorigin>

Answer 1

你可以尝试这样的事情：

*编辑：引用此处的文档：https://github.com/video-dev/hls.js/blob/master/docs/API.md——解析 id3 标签时应触发此事件。

hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
  if (data) {
    console.log("Data", data);
  }
});

Answer 2

据我所知，HLS 流不包含此类信息。

这是一个典型的 HLS 数据头（这一个用于“Skate Phantom”），位于：

https://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8

标题如下...

#EXTM3U 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=288000,RESOLUTION=256x144 low/skate_phantom_flex_4k_228_144p.m3u8 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=582000,RESOLUTION=426x240 medium/skate_phantom_flex_4k_452_240p.m3u8 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1018000,RESOLUTION=640x360 high/skate_phantom_flex_4k_788_360p.m3u8 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=1366000,RESOLUTION=854x480 veryhigh/skate_phantom_flex_4k_1056_480p.m3u8 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2742000,CODECS="avc1.4d001f,mp4a.40.2",RESOLUTION=1280x720 hdready/skate_phantom_flex_4k_2112_720p.m3u8 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=5400000,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=1920x1080 fullhd/skate_phantom_flex_4k_4160_1080p.m3u8 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=7556000,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=2560x1440 2k/skate_phantom_flex_4k_5816_1440p.m3u8 
#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=10768000,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=3840x2160 4k/skate_phantom_flex_4k_8288_2160p.m3u8

可以看出，它为您提供了媒体播放器切换到的所有可用分辨率，但没有有关实际播放内容的信息。

我们唯一的选择是使用从 URL 中提取的“文件名”，该文件名会简化为……“skate_phantom_...”

顺便说一句，我使用与你相同的库。