使用Spotify API插件专辑名称和歌手名称搜索曲目
Search for Track using Spotify API add in Album name and Artist name
正在进行一个快速项目,以便在Spotify中搜索音乐曲目。。。您将曲目名称添加到文本区域,并生成一个匹配曲目Id与艺术家名称和专辑名称+艺术作品的列表。。。下面是我目前正在编写的代码示例。。。正在获取专辑名称/专辑图像和艺术家名称。。。
我使用的示例是:曲目:我所有人结果应该是艺术家:约翰传奇磁道ID正确:3U4isOIWM3VvDubwSI3y7a
显示为第一个。。。。
http://jsfiddle.net/61f64ccq/2/
此外(更新此位…)
http://jsfiddle.net/UT7bQ/212/{{name}}-{this.artists.name}正在尝试为Handlebar.js添加代码,以便从.JSON数据中获取Artists名称。。。
下面是第一个例子。。。。
使用纯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>
谢谢Simon
下面是我更改并添加的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>
感谢大家的关注-现在已经修复。。。为Simon 干杯
相关文章:
- 用程序搜索JQuery数据表中的文本
- 在html Select中添加搜索
- Ajax Live搜索发布到Laravel视图
- 谷歌放置API:按国家或餐馆名称搜索餐馆
- 学生搜索项目jquery/javascript
- 用于搜索的聚合物嵌套绑定
- 在javascript中搜索具有重复值的两个数组中的匹配值
- Angularjs-utils高亮过滤器在搜索时破坏应用程序
- 使用javascript搜索具有用户输入的数组
- 淘汰搜索/筛选
- 搜索api在mac上显示对话框
- AngularJS/HTML/Bootstrap元素用于动态搜索结果
- 谷歌水印未显示在自定义搜索框中
- 在javascript中搜索项目列表的性能
- 正在搜索JavaScript日期选择器滑块
- JQuery中的活动搜索栏
- 如何在剑道下拉列表中按文本和值搜索
- 谷歌CSE-搜索参数
- 如何让typeahead在我的搜索栏中填充自定义参数
- 使用Spotify API插件专辑名称和歌手名称搜索曲目