Dlaczego ten script nie dziala. Probuje go na wszystkie sposoby odpalic ale nic. Prosze o porade.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<script src = "jquery-3.2.1.min.js></script>
<script src = "handlebars.min.js></script>
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src=
<!--[if lt IE 9]>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
</head>
<body>
<style>
body {
padding: 20px;
}
#search-form, .form-control {
margin-bottom: 20px;
}
.cover {
width: 300px;
height: 300px;
display: inline-block;
background-size: cover;
}
.cover:hover {
cursor: pointer;
}
.cover.playing {
border: 5px solid #e45343;
}
</style>
<div class="container">
<h1>Search for an Artist</h1>
<p>Type an artist name and click on "Search". Then, click on any album from the results to play 30 seconds of its first track.</p>
<form id="search-form">
<input type="text" id="query" value="" class="form-control" placeholder="Type an Artist Name"/>
<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 albums.items}}
<div style="background-image:url({{images.0.url}})" data-album-id="{{id}}" class="cover"></div>
{{/each}}
</script>
<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: 'album'
},
success: function (response) {
resultsPlaceholder.innerHTML = template(response);
}
});
};
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>
</body>
</html>
