使用 Spotify API 搜索曲目添加专辑名称和艺术家名称

Question

在 Spotify 中搜索音乐曲目的快速项目...您将曲目名称添加到文本区域并生成与艺术家姓名和专辑名称 + 艺术作品匹配的曲目 ID 列表...下面是示例到目前为止我正在处理的代码......卡住了专辑名称/专辑图片和艺术家姓名......

示例 - 我使用的是： 曲目：我都是 结果应该是艺术家：John Legend 轨道 ID 正确：3U4isOIWM3VvDubwSI3y7a

显示为第一个....

http://jsfiddle.net/61f64ccq/2/

还有（更新了这一点...）

http://jsfiddle.net/UT7bQ/212/ {{name}} - {{this.artists.name}} 正在尝试为 Handlebar.js 添加代码以从 .JSON 数据中获取艺术家姓名...

下面是第一个例子......

使用纯 JS/Handlebar.js 和 HTML5....任何帮助都会很棒...试过 {{artists.name}} 但没有任何反应...

<div class="container">
<h1>Search for a Track - Spotify</h1>
<form id="search-form">
<input type="text" id="query" value="" class="form-control" />
<input type="submit" id="search" class="btn btn-primary" value="Search" />
</form>
<div id="results"></div>
</div>
<script id="results-template" type="text/x-handlebars-template">
{{#each tracks.items}}
<div >{{id}} -         
<br /> {{name}} <br/></div>
// Issue - Image
<div style="border:1px solid red; background-image:url({{images.2.url}})" data-album-id="{{id}}" class="cover"></div>
// Issue - Artist Name and Album Name
<div style="border:1px solid green; "> Artist name = {  } -  Album name = { } </div>

部分 Javascript 代码 -

<script>
var templateSource = document.getElementById('results-template').innerHTML,
template = Handlebars.compile(templateSource),
resultsPlaceholder = document.getElementById('results'),
playingCssClass = 'playing',
audioObject = null;
var fetchTracks = function (albumId, callback) {
$.ajax({
url: 'https://api.spotify.com/v1/albums/' + albumId,
success: function (response) {
callback(response);
}
});
};
var searchAlbums = function (query) {
$.ajax({
url: 'https://api.spotify.com/v1/search',
data: {
q: query,
type: 'track'
// Gets the track - search query
},
success: function (response) {
resultsPlaceholder.innerHTML = template(response);
}
});
};
// This was for playing the Track in your window...  Not working in the Track format...
results.addEventListener('click', function (e) {
var target = e.target;
if (target !== null && target.classList.contains('cover')) {
if (target.classList.contains(playingCssClass)) {
audioObject.pause();
} else {
if (audioObject) {
audioObject.pause();
}
fetchTracks(target.getAttribute('data-album-id'), function (data) {
audioObject = new Audio(data.tracks.items[0].preview_url);
audioObject.play();
target.classList.add(playingCssClass);
audioObject.addEventListener('ended', function () {
target.classList.remove(playingCssClass);
});
audioObject.addEventListener('pause', function () {
target.classList.remove(playingCssClass);
});
});
}
}
});
document.getElementById('search-form').addEventListener('submit', function (e) {
e.preventDefault();
searchAlbums(document.getElementById('query').value);
}, false);
</script>

谢谢 西蒙

Answer 1

以下是我更改并添加的 Fiddle 示例 - 以 Handlebars 为例，以正确的格式获取专辑信息 - 图像/艺术家、专辑类型和专辑名称....希望对其他人有用....

http://jsfiddle.net/61f64ccq/4/

<script id="results-template" type="text/x-handlebars-template">
{{#each tracks.items}}
<div >{{id}} -         
<br /> {{name}} <br/></div>
<div style="border:1px solid red; background-image:url({{album.images.2.url}})" data-album-id="{{id}}" class="cover"></div>
<div style="border:1px solid green; "> Artist name = {{artists.0.name}} </div>
<div style="border:1px solid green; "> Album Type = {{album.album_type}} </div>
<div style="border:1px solid green; "> Album name = {{album.name}} </div>
{{/each}}
</script>

感谢所有关注此问题的人 - 现在已修复...干杯西蒙