在页面标题（浏览器选项卡）中显示歌曲的元数据？

Question

我会将我的编码技能标记为中级，因此我所问的问题可能简单或明显，也可能不简单（我不知道其中的区别）。我也衷心感谢所有对此给予哪怕一丁点关注的人。

我的 objective 是通过 jsonp 和 ajax 方法从另一台服务器（我是其中的客户）获取原始歌曲元数据。成功获取元数据（艺术家、标题和专辑）后，然后我想将其显示在我网站的页面标题中（请参见下图）。我想这样做的原因是因为从我可以通过广泛而陈旧的研究收集到的信息来看，似乎大多数蓝牙音频设备都在从页面标题（浏览器选项卡）中读取元数据： Google Music playing in browser BT Audio player

我想做的事情看起来应该很简单，但我无法像 Spotify、Youtube 或 Google Music 那样在我的浏览器中显示 "Artist, Title and Album"。

我下面的代码能够提取原始数据，使用 jsonp 对其进行转换，并且我可以通过将其作为 ID 元素从原始数据 (IE 'title') 中成功地仅推送一个元素。但是，如何将所有三个（艺术家、标题和专辑）推送到页面标题？

    <!DOCTYPE html>
<html 
    lang=en
    dir="ltr"
    class="mobile-web-player"
>

<head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
      
<script type="text/javascript">      
         function update(metadataObj) {
            if (metadataObj && metadataObj.m_Item2) {
               
               var title = document.getElementById('title');
               title.innerHTML = metadataObj.m_Item2.Title;
               
               var artist = document.getElementById('artist');
               artist.innerHTML = 'by ' +   metadataObj.m_Item2.Artist;

               var album = document.getElementById('album');
               album.innerHTML = metadataObj.m_Item2.Album + ' ';
              
            }
         }         
</script>
      
      <script type="text/javascript">
            var stationID = 'X123';
            var apiToken = 'X12345';
            // refresh MetaData every 5 seconds
         function fetchMetadata(stationID, apiToken) {            
            $.ajax({
               type: 'get',
               cache: false,
               url: "https://listen.samcloud.com/webapi/station/X123/history/npe?token=X12345&callback=update&format=json",
               //async: true,
               datatype: 'jsonp',
            });
         }
         fetchMetadata(stationID, apiToken);
         window.setInterval(function() {
            fetchMetadata(stationID, apiToken);
         }, 5000);
      </script>

<!-- I can successfully send the song's title to my page title via <title id> method -->
<title id="title">My Radio Station</title>

</head>

<body>
</body>

</html>

Answer 1

在您的 update() 函数中，您可以调用 document.title 来设置新标签标题，而不是设置 <title> 标签。例如：

function update(metadataObj) {
  if (metadataObj && metadataObj.m_Item2) {

     var title = document.getElementById('title');
     var artist = document.getElementById('artist');
     var album = document.getElementById('album');
     // If you are using es6
     document.title = `Playing ${title} from ${artist} - ${album}`;
     // If not using es6
     // document.title = 'Playing '+ title + ' from '+ artist +' - album';
  }
}

Answer 2

您可以将更新功能更改为以下内容，将艺术家、标题和专辑写入网页标题。

function update(metadataObj) {
  if (metadataObj && metadataObj.m_Item2) {               
    var title = document.getElementById('title');
     title.innerHTML = metadataObj.m_Item2.Title + ' ' + metadataObj.m_Item2.Album + ' ' + metadataObj.m_Item2.Artist;              
  }
}

在页面标题（浏览器选项卡）中显示歌曲的元数据？

Display song's metadata in page title (browser tab)?

javascript

jsonp

metadata