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

问题描述：

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

示例 - 我正在使用是：追踪：所有我的结果应该是艺术家：约翰传奇轨道ID是正确的：3U4isOIWM3VvDubwSI3y7a

显示为第一个....

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

而且（更新该位......）

http://jsfiddle.net/UT7bQ/212/ {{名}} - {{this.artists.name}} 试图为Handlebar.js用于添加代码从以.json数据获取艺术家名称...

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

使用纯JS/Handlebar.js和HTML5 ....任何帮助将是巨大的...尝试{{artists.name}}但没有发生任何事情...的JavaScript代码

<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>

部分 -

<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>

感谢西蒙

答

下面是我改变，并添加了小提琴的例子 - 在把手凑了专辑信息与示例正确的格式 - 图像/艺术家，相册类型和相册名称....希望对其他人有用....

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>

感谢大家在看这个 - 已得到修复...干杯西蒙

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

相关推荐