我会将我的编码技能标记为中级，因此我所问的内容可能是也可能不是简单或明显的(我不知道区别(。我也衷心感谢任何给予这一点的人，哪怕是一丝关注。
我的目标是通过 jsonp 和 ajax 方法从另一台服务器(我是该服务器的客户(获取原始歌曲元数据。一旦我成功获取了元数据(艺术家，标题和专辑(，我想将其显示在我网站的页面标题中(请参阅下面的图片(。 我想这样做的原因是，从我通过广泛而疲惫的研究收集到的信息来看，似乎大多数蓝牙音频设备都在从页面标题(浏览器选项卡(读取元数据： 谷歌音乐在浏览器中播放 BT音频播放器
我想做的事情似乎应该很简单，但我无法像Spotify，Youtube或Google Music那样在我的浏览器中显示"艺术家，标题和专辑"。
我下面的代码能够提取原始数据，使用 jsonp 进行转换，并且我可以通过将原始数据(即"标题"(作为 ID 元素来成功推送一个元素。但是，如何将所有三个(艺术家，标题和专辑(推送到页面标题？
<!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>在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';
}
}
您可以将更新功能更改为以下内容，以将艺术家、标题和专辑写入网页标题。
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;
}
}