如何设置动态document.title，将曲目名与艺术家信息展示在浏览器标签栏

你需要将标签页标题的更新逻辑和曲目信息更新逻辑绑定，原代码中固定写死的document.title = 'test'只会在页面初始化时执行一次，无法随曲目变化同步更新，修改方式如下：

1. 先删除原代码第51行附近的固定设置document.title = 'test'的代码段
2. 在updateTrack函数的DOM更新逻辑中添加标签标题更新代码，保证和页面展示内容同步更新

修改后的updateTrack函数完整代码：

const updateTrack = (track) => {
  const title = formatTitle(track);
  const artist = formatArtist(track);
  const titleEl = document.querySelector('#title');
  const artistEl = document.querySelector('#artist');
  const overlay = document.querySelectorAll('.fade');

  if (titleEl.innerHTML === title && artistEl.innerHTML === artist)
    return;

  // Fade out the old track title.
  overlay.forEach((el) => {
    el.style.opacity = 0;
  });

  // Fade in the new track.
  setTimeout(() => {
    titleEl.innerHTML = title;
    artistEl.innerHTML = artist;
    // 新增：同步更新浏览器标签页标题
    document.title = `${title} - ${artist}`;
    overlay.forEach((el) => {
      el.style.opacity = 1;
    });
  }, 1000);
};

如果需要适配缺省场景，比如曲目没有艺术家信息时不显示多余的连接符，可以调整拼接逻辑：

document.title = [title, artist].filter(Boolean).join(' - ');

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