tag:blogger.com,1999:blog-36025862003947610052024-03-06T06:18:51.489+01:00WLCY Radio HitsThe Flashback of the 60s, 70s, 80s Greatest Music HitsFidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.comBlogger1514125tag:blogger.com,1999:blog-3602586200394761005.post-59242407017692952082020-08-22T08:54:00.003+02:002020-11-11T20:17:55.164+01:00Pop Hits: 1971 - WLCY Radio Hits Playlist <div class="separator"><div class="separator" style="margin-left: 1em; margin-right: 1em; text-align: center;">
<img alt="Pop Hits: 1971 - WLCY Radio Hits Playlist" border="0" data-original-height="600" data-original-width="600" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/w320-h320/Pop+Hits-1971-itunes.jpg" title="Pop Hits: 1971 - WLCY Radio Hits Playlist" width="320" />
</div></div>
<div style="text-align: left;">
<b>Listen to Pop Hits: 1971</b> - WLCY Radio Hits Playlist. This collection
brings together great songs from the top of the charts. Enjoy 51 songs, 3
hours, 5 minutes of great music.
</div>
<div style="clear: both;"></div>
<style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}</style><br />
<br />
<div style="clear: both;"></div>
<div class="notranslate" translate="no">
<div id="player">
<div class="cover">
<div class="lrc"><div class="line"></div></div>
</div>
<div class="progressContainer">
<div class="buffer"></div>
<div class="progress"></div>
</div>
<div class="detail"><div class="title"></div></div>
<div class="controls">
<i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input class="volume" max="100" type="range" value="100" /><br />
<br />
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<br />
<br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1C2nREBpchHl73FfNRT0SJ6yr3b6IsoDt",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Bill Withers",
title: "Ain't No Sunshine",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1PdhlUZUJIuh3h_BeQe7xjazOPW4vtjhK",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "John Denver",
title: "Take Me Home, Country Roads",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1Zui2f_3Pb2hMZpRU0emli6Ln50UGtQsE",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Stevie Wonder",
title: "If You Really Love Me",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1zB1Il__cOrpYmcOVKyPMm3HnqtRfp49n",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Joan Baez",
title: "The Night They Drove Old Dixie Down",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1Je2wi07bKEbVH8pxITTWzYAWG9VyrjED",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Jackson 5",
title: "Never Can Say Goodbye",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1IHAjXl02y0CvyPN5jMbux0jJKkSeLXKE",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Aretha Franklin",
title: "Rock Steady",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1lPQFEs2BPP3n-HMuA8nmfYLmqfwAFlVK",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Francis Lai",
title: "Theme from Love Story",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1K6QwCxOyMfM0-0o3SbG7B54ADYDj7x6j",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Rod Stewart",
title: "Maggie May",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1WJNEmFD6iypIwPh_jLfdKb8HZuZOhhT3",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Dawn & Tony Orlando",
title: "Candida",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1eskQ9ulyqXFDvyJ-ztOQk37eGrMCyFP8",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Carly Simon",
title: "That's the Way I've Always Heard It Should Be",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1tWNEgzqygMJTzG965pqXndSCqOcfWDTK",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Lobo",
title: "Me and You and a Dog Named Boo",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1wj4ID6s3hiqomF3FeHcRNFbO6bb_IuEs",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Jean Knight",
title: "Mr. Big Stuff",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1RkwpGb3H-75vYreSr4u8nCReaQzEILpI",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Chicago",
title: "Beginnings",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1pHwvMwxuJF6xOpuc2NoLLL2jmqjoh6Rt",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Cat Stevens",
title: "Wild World",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1aDXe7dZqycIpP5jmpa3VQYw-BM8LxsxI",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Gordon Lightfoot",
title: "If You Could Read My Mind",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1Y2TB7i6CYVgVP48RBLmKK1vvYtouPmqZ",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "George Harrison",
title: "My Sweet Lord",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1QL0ROvVpBy1RGbbuMxzFwxccKYsWVYgV",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "John Lennon",
title: "Imagine",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1gzH6JEi3DxkQOqFdM03jLfDa8-PBy7Yq",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "The Rolling Stones",
title: "Brown Sugar",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1IHXfauIPv7NQbPhwgXoTY89Eb7bYjVR9",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Bread",
title: "If",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=15jWRvWFatmVo493EKr8fqAPlxcefmQbP",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "The Dramatics",
title: "Whatcha See is Whatcha Get",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=13j4Hr0WoR39a3aYIWSVSiAHk00-bzUGp",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Carole King",
title: "I Feel the Earth Move",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1QHIsuWkLZBm1O6rXpBZpOO-JTldOs8SQ",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Bee Gees",
title: "How Can You Mend a Broken Heart",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1W-621ej2zxGFfg7ur94rDTNhplcdZGds",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Murray Head & Choir",
title: "Superstar",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1MrMjixKPMw6HDfiS_KlNpcIl-193J6zR",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Elton John",
title: "Your Song",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1AJfC3NsNhhBaAaHTrmIGgE_oNDDSEp_y",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "T. Rex",
title: "Bang a Gong (Get It On)",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1oefBfQz6KT0o-IWkmtnfkSxZLNJXU3nD",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Paul and Linda McCartney",
title: "Uncle Albert / Admiral Halsey",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1qGexRAC9NiHpmJcD_eljjGd14XwU8xee",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Carpenters",
title: "Superstar",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1xQZPKuhgn8bFmCOFvoMv25seMOyKr55b",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Cher",
title: "Gypsies, Tramps and Thieves",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1BuyHc8UAfiC0nmF_12g3hrSFdgguiPx1",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Chicago",
title: "Colour My World",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=13ZTzBUguHLwsP4xYvn4xMWQ1fJQfoNnx",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Janis Joplin",
title: "Me and Bobby McGee",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1jdMJkSaEBrNSKrle2f4hab53Jrhp3POu",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Paul Revere & The Raiders",
title: "Indian Reservation",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=168TVb7MkQMtokdqq6uyK6Rsvlu7QdV_G",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "The Undisputed Truth",
title: "Smiling Faces Sometimes",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1LDyHJOsofpUlsOfIzSEibzKbTsgzEPEH",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Nitty Gritty Dirt Band",
title: "Mr. Bojangles",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1wrc09hUrzUILv_io9gTzcYkjalOHZTqY",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Creedence Clearwater Revival",
title: "Have You Ever Seen the Rain?",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1BupVVt0E5Zyf9_eqdBe0nGJeV2DBsFTC",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Lee Michaels",
title: "Do You Know What I Mean",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1T8mvMY0ACufiRzzyXTxyaBdS4BXR22tO",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "The Osmonds",
title: "One Bad Apple",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1RkVj4WV4JImMbQARyEY2yWGDC7TlgDOu",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Neil Diamond",
title: "I Am...I Said",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1q51fkW6033NpELn-LR1UWoLEgWCPZzfy",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Ike & Tina Turner",
title: "Proud Mary",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1qLJor75PrkaVjMJq0fTQF17tnIzzOyma",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "James Taylor",
title: "You've Got a Friend",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=13daS3ZIoc3jNYN0IChmzSO_CGZiCQR9E",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Carpenters",
title: "Rainy Days And Mondays",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1T5X2tFbut7bkBAovvffVSol-xP9Szdpd",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Marvin Gaye",
title: "Mercy Mercy Me",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1c-6MfOQKU-yJoSqIy-Rm9Z8iKjulGayI",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Three Dog Night",
title: "Joy To the World",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1UBeaJ_wNOaRhN5sNlueZWgv1V7OiV16o",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "The Temptations",
title: "Just My Imagination (Running Away With Me)",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1fWEmMfseT9FysAj-rUiH1rS9kgK1dvj6",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Marvin Gaye",
title: "What's Going On",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1JZEC4IO80uRn_JvHBWsrQq9hQcXruw0g",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Five Man Electrical Band",
title: "Signs",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1dlubvgn97VOJQivpR71zlInOHv7io4lT",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Al Green",
title: "Tired of Being Alone",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1kCOmfHHT7AMVJqmTfjeSr6Tt4cvCNbTS",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Isaac Hayes",
title: "Theme From Shaft",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1LFtLlvbYFo2S4W9sw4xzMcKzIJkjQt9y",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Honey Cone",
title: "Want Ads",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1ktUceeLFCBvucvN6VcHV_SWMM1-nBWoN",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Carole King",
title: "It's Too Late",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1TOt9_OEKsPs69cGXWju8-Lb5fbTXxdNC",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Ringo Starr",
title: "It Don't Come Easy",
lrc: ""
},
{
track: "https://docs.google.com/uc?export=download&id=1PEqo_xL6CKXvz3ddMqg3qO4k1bXOurWl",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxbxmfBZ42hYT1xC-yKCfKuzZ0GqeEQV6dTpNnBGYh05CtT8_DskhcJO3opLEMMCJo6IgEN5brVWqqTKhr7kMKpjiepfpBCB3EBtmwWErB3VctSDZU0JV8CD_nscsfEV1uQYkCuiIGOGsc/s320/Pop+Hits-1971-itunes.jpg",
artist: "Cornelius Brothers & Sister Rose",
title: "Treat Her Like a Lady",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>
<div style="clear: both;"></div>
<style>
table.darkTable {
font-family: Arial, Helvetica, sans-serif;
border: 2px solid #000000;
background-color: #4A4A4A;
width: 100%;
height: 200px;
text-align: left;
border-collapse: collapse;
}
table.darkTable td, table.darkTable th {
border: 2px solid #4A4A4A;
padding: 3px 2px;
}
table.darkTable tbody td {
font-size: 16px;
color: #E6E6E6;
}
table.darkTable thead {
background: #000000;
border-bottom: 3px solid #000000;
}
table.darkTable thead th {
font-size: 15px;
font-weight: normal;
color: #E6E6E6;
text-align: center;
border-left: 2px solid #4A4A4A;
}
table.darkTable thead th:first-child {
border-left: none;
}
table.darkTable tfoot {
font-size: 12px;
font-weight: normal;
color: #E6E6E6;
background: #000000;
background: -moz-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: -webkit-linear-gradient(top, #404040 0%, #191919 66%, #000000 100%);
background: linear-gradient(to bottom, #404040 0%, #191919 66%, #000000 100%);
border-top: 1px solid #4A4A4A;
}
table.darkTable tfoot td {
font-size: 12px;
}
#table-scroll {
height:300px;
overflow:auto;
margin-top:20px;
}
</style>
<div id="table-scroll">
<table class="darkTable">
<thead>
<tr>
<th>Pop Hits: 1971 - WLCY Radio Hits Playlist Songs</th>
</tr>
</thead>
<tfoot>
<tr>
<td>WLCY Radio Hits 2020</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Ain't No Sunshine - Bill Withers</td>
</tr>
<tr>
<td>Take Me Home, Country Roads (Original Version) - John Denver</td>
</tr>
<tr>
<td>If You Really Love Me - Stevie Wonder</td>
</tr>
<tr>
<td>The Night They Drove Old Dixie Down - Joan Baez</td>
</tr>
<tr>
<td>Never Can Say Goodbye - Jackson 5</td>
</tr>
<tr>
<td>Rock Steady - Aretha Franklin</td>
</tr>
<tr>
<td>Theme from Love Story - Francis Lai</td>
</tr>
<tr>
<td>Maggie May - Rod Stewart</td>
</tr>
<tr>
<td>Candida - Dawn & Tony Orlando</td>
</tr>
<tr>
<td>That's the Way I've Always Heard It Should Be - Carly Simon</td>
</tr>
<tr>
<td>Intro / Me and You and a Dog Named Boo - Lobo</td>
</tr>
<tr>
<td>Mr. Big Stuff - Jean Knight</td>
</tr>
<tr>
<td>Beginnings (Remastered) - Chicago</td>
</tr>
<tr>
<td>Wild World - Cat Stevens</td>
</tr>
<tr>
<td>If You Could Read My Mind - Gordon Lightfoot</td>
</tr>
<tr>
<td>My Sweet Lord - George Harrison</td>
</tr>
<tr>
<td>Imagine - John Lennon</td>
</tr>
<tr>
<td>Brown Sugar - The Rolling Stones</td>
</tr>
<tr>
<td>If - Bread</td>
</tr>
<tr>
<td>Whatcha See is Whatcha Get - The Dramatics</td>
</tr>
<tr>
<td>I Feel the Earth Move - Carole King</td>
</tr>
<tr>
<td>How Can You Mend a Broken Heart - Bee Gees</td>
</tr>
<tr>
<td>Superstar - Murray Head & Choir</td>
</tr>
<tr>
<td>Your Song - Elton John</td>
</tr>
<tr>
<td>Bang a Gong (Get It On) - T. Rex</td>
</tr>
<tr>
<td>Uncle Albert / Admiral Halsey - Paul and Linda McCartney</td>
</tr>
<tr>
<td>Superstar - Carpenters</td>
</tr>
<tr>
<td>Gypsies, Tramps and Thieves - Cher</td>
</tr>
<tr>
<td>Colour My World (Remastered) - Chicago</td>
</tr>
<tr>
<td>Me and Bobby McGee - Janis Joplin</td>
</tr>
<tr>
<td>
Indian Reservation (The Lament of the Cherokee Reservation Indian) -
The Raiders
</td>
</tr>
<tr>
<td>Smiling Faces Sometimes - The Undisputed Truth</td>
</tr>
<tr>
<td>Mr. Bojangles - Nitty Gritty Dirt Band</td>
</tr>
<tr>
<td>Have You Ever Seen the Rain? - Creedence Clearwater Revival</td>
</tr>
<tr>
<td>Do You Know What I Mean - Lee Michaels</td>
</tr>
<tr>
<td>One Bad Apple - The Osmonds</td>
</tr>
<tr>
<td>I Am...I Said (Reprise) - Neil Diamond</td>
</tr>
<tr>
<td>Proud Mary - Ike & Tina Turner</td>
</tr>
<tr>
<td>You've Got a Friend - James Taylor</td>
</tr>
<tr>
<td>Rainy Days And Mondays - Carpenters</td>
</tr>
<tr>
<td>Mercy Mercy Me (The Ecology) - Marvin Gaye</td>
</tr>
<tr>
<td>Joy To the World (Edit) - Three Dog Night</td>
</tr>
<tr>
<td>Just My Imagination (Running Away With Me) - The Temptations</td>
</tr>
<tr>
<td>What's Going On - Marvin Gaye</td>
</tr>
<tr>
<td>Signs - Five Man Electrical Band</td>
</tr>
<tr>
<td>Tired of Being Alone - Al Green</td>
</tr>
<tr>
<td>Theme From Shaft - Isaac Hayes</td>
</tr>
<tr>
<td>Want Ads - Honey Cone</td>
</tr>
<tr>
<td>It's Too Late - Carole King</td>
</tr>
<tr>
<td>It Don't Come Easy (Bonus Track) - Ringo Starr</td>
</tr>
<tr>
<td>Treat Her Like a Lady - Cornelius Brothers & Sister Rose</td>
</tr>
</tbody>
</table>
</div>
Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-86505767967265395672020-08-09T14:01:00.000+02:002020-08-09T14:01:23.546+02:00Brian Hyland - Itsy Bitsy Teenie Weenie Yellow Polka Dot Bikini (1960)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MTGLJM1aK5s-gLs-JUfL1Se8RtFHITUjlQZxps4HhXsvO2j7H8NLvd7WKsf1e2DOmtea8ZsPlaBPJUNx1szkrNZgiOBG3TdWdz90UlH4SNwGqoJE0qFzzyOiR2TqqDzHP9vh1WvicjSN/s1600/The+Bashful+Blond_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Brian Hyland - Itsy Bitsy Teenie Weenie Yellow Polka Dot Bikini (1960)" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8MTGLJM1aK5s-gLs-JUfL1Se8RtFHITUjlQZxps4HhXsvO2j7H8NLvd7WKsf1e2DOmtea8ZsPlaBPJUNx1szkrNZgiOBG3TdWdz90UlH4SNwGqoJE0qFzzyOiR2TqqDzHP9vh1WvicjSN/s320/The+Bashful+Blond_500W_500H.jpg" title="Brian Hyland - Itsy Bitsy Teenie Weenie Yellow Polka Dot Bikini (1960)" width="300" /></a></div><div style="text-align: justify;">"<b>Itsy Bitsy Teenie Weenie Yellow Polkadot Bikini</b>" is a novelty song telling the story of a shy girl wearing a revealing polka dot bikini at the beach. It was written by Paul Vance and Lee Pockriss and first released in June 1960 by <b>Brian Hyland</b>, with orchestra conducted by John Dixon. The Hyland version reached number one on the Billboard Hot 100, selling a million copies in the US, and was a worldwide hit. The song has been adapted into French as "<i>Itsy bitsy petit bikini</i>" and into German as "<i>Itsy Bitsy Teenie Weenie Honolulu-Strand-Bikini</i>", reaching number one on national charts in both languages. Several versions of the song have proved successful in various European countries. In 1990 a version by British pop band Bombalurina, titled "<i>Itsy Bitsy Teeny Weeny Yellow Polka Dot Bikini</i>", reached number one on the UK Singles Chart and in Ireland.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1GMxqgFVy5oayUQ4LLK0rtGlscdtCo1Z9",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Brian Hyland",
title: "Itsy Bitsy Teenie Weenie Yellow Polka Dot Bikini",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-36126559765218169242020-08-09T13:06:00.000+02:002020-08-09T13:08:06.750+02:00Bob Luman - Let’s Think About Living (1960)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvlkjPtaBnz44mFrQHQ6SQ8kvx5gXn6MZaraMuZ3vC1MpBZSwA216mfbGLLJCpElG6QKqKIDNRDjThOXMZfLDrwzpHGoRs4chHpfHp7m7kDg11AlPIPfaUMW-bg4noCgFNpcLcqEn_f0-/s1600/Bob+Selection_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Bob Luman - Let’s Think About Living (1960)" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvlkjPtaBnz44mFrQHQ6SQ8kvx5gXn6MZaraMuZ3vC1MpBZSwA216mfbGLLJCpElG6QKqKIDNRDjThOXMZfLDrwzpHGoRs4chHpfHp7m7kDg11AlPIPfaUMW-bg4noCgFNpcLcqEn_f0-/s320/Bob+Selection_500W_500H.jpg" title="Bob Luman - Let’s Think About Living (1960)" width="300" /></a></div><div style="text-align: justify;">"<b>Let's Think About Living</b>" is a song written by Boudleaux Bryant, and recorded by <b>Bob Luman</b> in 1960.</div><br />
<div style="text-align: justify;">The song is an open critique of the teenage tragedy song and gunfighter ballad genera of the time, humorously quipping that if Marty Robbins, Patti Page and the Everly Brothers actually died in the songs where they mention dying ("El Paso" and "Cathy's Clown" in the first and last respective cases) that the singer will soon be the last surviving musician in the industry. The singer suggests happier themes for songs in the future such as living, loving and dancing.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div><br />
acts as a separator--></div><div translate="no" class="notranslate"><div id="player"><div class="cover"><div class="lrc"><div class="line"></div></div></div><div class="progressContainer"><div class="buffer"></div><div class="progress"></div></div><div class="detail"><div class="title"></div></div><div class="controls"><i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br />
<br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1WzHJd-rRiYyptC9EjQElZqiB-3on9-of",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Bob Luman",
title: "Let's Think About Living",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-76336536447954008462020-07-18T12:00:00.000+02:002020-07-18T12:00:56.696+02:00Paul Anka - My Home Town (1960)<div class="separator" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img alt="Paul Anka - My Home Town (1960) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIuQCp0xb1zwAD6kcIlKn0Hx-YISOJmim9Gp60Mvt5u4LkoV4YvUA7-e50Ou3dSebotDTyjos8SmV50qgYtH82bkv1L1m2ZyFTWHH_EProsDK5Oi_Ih__C8t4gKROXhLjPXbphvH7JtcGn/s320/21+Golden+Hits_500W_500H.jpg" title="Paul Anka - My Home Town (1960) WLCY Radio Hits" width="300" /></div><div style="text-align: justify;">"<b>My Home Town</b>" is a song written and performed by <b>Paul Anka</b>. The song was arranged by Sid Feller. It reached #8 on the U.S. pop chart in 1960. The single's B-side, "Something Happened", reached #41 on the U.S. pop chart. The song ranked #77 on Billboard magazine's Top 100 singles of 1960.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1NZDLGCfsyogQw0XSeKhyXSQ1EzfU8BCl",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Paul Anka",
title: "My Home Town",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-33813750266241335222020-07-03T18:22:00.001+02:002020-07-03T18:22:11.018+02:00Mark Dinning - Teen Angel (1960)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7UHvzmd5l_OOjRUCXpkxmBGZsdY5JngZK7K1dE7lFfJZzqkBVJeDA9V-02pS_y2i-HB9nH-HYAMkYoKWO7ReY4YYuKTYaSCxc_3ecVOS83XqBBGYyX4-QfzOWTYcUdPYfIuPKVJwiLuLJ/s1600/Rare+Oldies+But+Goodies_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Mark Dinning - Teen Angel (1960)" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7UHvzmd5l_OOjRUCXpkxmBGZsdY5JngZK7K1dE7lFfJZzqkBVJeDA9V-02pS_y2i-HB9nH-HYAMkYoKWO7ReY4YYuKTYaSCxc_3ecVOS83XqBBGYyX4-QfzOWTYcUdPYfIuPKVJwiLuLJ/s320/Rare+Oldies+But+Goodies_500W_500H.jpg" title="Mark Dinning - Teen Angel (1960)" width="300" /></a></div><div style="text-align: justify;">"<b>Teen Angel</b>" is a teenage tragedy song written by Jean Dinning (1924–2011) and her husband, Red Surrey, and performed by both Jean's brother, <b>Mark Dinning</b>, and Alex Murray in 1959. "Teen Angel" was released in October 1959. The song was not an instant success, with radio stations in the U.S. banning the song, considering it too sad. Despite the reluctance of radio stations, the song continued to climb the charts. In the last week of 1959, the single jumped from #100 to #50 on the Billboard Hot 100 chart. It went on to reach #1 on the U.S. Billboard Hot 100 (February 1960)</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=17Pi7Noq0R9oKsbN3Yh6-pOgtEe6sC7fM",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Mark Dinning",
title: "Teen Angel",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com1tag:blogger.com,1999:blog-3602586200394761005.post-54277986481629930422020-07-03T10:41:00.002+02:002020-07-03T10:41:51.825+02:00Dion & The Belmonts - Where Or When (1960)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjySowVo2IJ7EqPet9KINKpRHHipAqO1P52BGCJqFEh_hWEZsNjB6HmGTsGZg5vMlVy-CR5IXgsOkSVHjSDGhScthE6l6ueyQ0ZwS_hzruclHueDh1HYcpd69qo8rN6Qa3x6BQwn9pvUha6/s1600/Presenting+Dion+And+The+Belmonts_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Dion & The Belmonts - Where Or When (1960)" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjySowVo2IJ7EqPet9KINKpRHHipAqO1P52BGCJqFEh_hWEZsNjB6HmGTsGZg5vMlVy-CR5IXgsOkSVHjSDGhScthE6l6ueyQ0ZwS_hzruclHueDh1HYcpd69qo8rN6Qa3x6BQwn9pvUha6/s320/Presenting+Dion+And+The+Belmonts_500W_500H.jpg" title="Dion & The Belmonts - Where Or When (1960)" width="300" /></a></div><div style="text-align: justify;">"<b>Where or When</b>" is a show tune from the 1937 Rodgers and Hart musical Babes in Arms. It was first performed by Ray Heatherton and Mitzi Green. That same year, Hal Kemp recorded a popular version. It also appeared in the film version of <i>Babes in Arms</i> two years later.</div><br />
<div style="text-align: justify;"><b>Dion and the Belmonts</b> released a successful cover of the song, which reached number 3 on the Billboard Hot 100 in January 1960. In 1963, The Lettermen released their version as a single, which peaked at number 98 on the Hot 100.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1Mh8yeQPU6WDxBeSjmKlu5eyNLJpOWKLt",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Dion & The Belmonts",
title: "Where Or When",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com1tag:blogger.com,1999:blog-3602586200394761005.post-90590057582448579102020-07-03T09:28:00.001+02:002020-07-03T09:28:21.581+02:00Conway Twitty - Lonely Blue Boy (1960)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYqoDySC6_IZkfHD6BfmHBAAcW7Ywh3uqqQEhbftlzzWW6rmmQkZyjTUlzmA_STuqpgHgFqYsrLMxejZyiPW1Mqt9FP8Z4U-f_xRPdkC4IfliKX288hHVsPqvxIDT22SQvMkoW5G1MDVpx/s1600/Conway+Twitty-Gold_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Conway Twitty - Lonely Blue Boy (1960)" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYqoDySC6_IZkfHD6BfmHBAAcW7Ywh3uqqQEhbftlzzWW6rmmQkZyjTUlzmA_STuqpgHgFqYsrLMxejZyiPW1Mqt9FP8Z4U-f_xRPdkC4IfliKX288hHVsPqvxIDT22SQvMkoW5G1MDVpx/s320/Conway+Twitty-Gold_500W_500H.jpg" title="Conway Twitty - Lonely Blue Boy (1960)" width="300" /></a></div><div style="text-align: justify;">"<b>Lonely Blue Boy</b>" (originally entitled "Danny" and sung by Elvis Presley) is a song written by Ben Weisman and Fred Wise and performed by <b>Conway Twitty</b>. It reached #6 on the U.S. pop chart and #27 on the U.S. R&B chart in 1960. It was featured on his 1960 album Lonely Blue Boy.</div><br />
<div style="text-align: justify;">The song ranked #38 on Billboard magazine's Top 100 singles of 1960.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1WP8NAlfnSPR81P2qSOI5G52bVC-yG-Sk",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Conway Twitty",
title: "Lonely Blue Boy",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-36830967663815366752020-07-03T09:12:00.000+02:002020-07-03T09:12:40.625+02:00Percy Faith & His Orchestra - The Theme From "A Summer Place" (1960)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWsB9O-pMgkym5kSKk_e360DY1bMduCYdtZ8hENask-D4Wlt23keSTcinwgSVXcgMGjTLWlq35F5L9yuJ97MBYZVMSOVnSquriEnJ-4qqPbWC0lW2vZSWros-E4v-ol66Q9qiVfpA4QRK/s1600/16+Most+Requested+Songs_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Percy Faith & His Orchestra - The Theme From "A Summer Place" (1960)" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWsB9O-pMgkym5kSKk_e360DY1bMduCYdtZ8hENask-D4Wlt23keSTcinwgSVXcgMGjTLWlq35F5L9yuJ97MBYZVMSOVnSquriEnJ-4qqPbWC0lW2vZSWros-E4v-ol66Q9qiVfpA4QRK/s320/16+Most+Requested+Songs_500W_500H.jpg" title="Percy Faith & His Orchestra - The Theme From "A Summer Place" (1960)" width="300" /></a></div><div style="text-align: justify;">"<b>Theme from A Summer Place</b>" is a song with lyrics by Mack Discant and music by Max Steiner, written for the 1959 film <i>A Summer Place</i>, which starred Sandra Dee and Troy Donahue. It was recorded for the film as an instrumental by Hugo Winterhalter. Originally known as the "<i>Molly and Johnny Theme</i>", the piece is not the main title theme of the film, but a secondary love theme for the characters played by Dee and Donahue.</div><br />
<div style="text-align: justify;">Following its initial film appearance, the theme has been recorded by many artists in both instrumental and vocal versions, and has also appeared in a number of subsequent films and television programs. The best-known cover version of the theme is an instrumental version by <b>Percy Faith and his orchestra</b> that was a Number One hit for nine weeks on the Billboard Hot 100 chart in 1960.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1LwxH6Ukb0raGe6FYP9CHIoRM_m30XLNs",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Percy Faith",
title: "Theme From A Summer Place",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-24553303653747771332020-06-24T10:48:00.000+02:002020-06-24T10:48:12.485+02:00The Shirelles - Tonights The Night (1961)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0c4FlfOpfuoZRJ3qzjig0udshjWXFGFAuFEZYFMRw0HwGlgYVsUcy4f3-XjDCKI2OSO53XMg8HcSxwKGySY9Otq_uqk9O3Sv8diSQyY2aIibmwq-0J_lsH6KqatUk3ddIowvQsre7Rvx/s1600/Greatest+Hits_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="The Shirelles - Tonights The Night (1961) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT0c4FlfOpfuoZRJ3qzjig0udshjWXFGFAuFEZYFMRw0HwGlgYVsUcy4f3-XjDCKI2OSO53XMg8HcSxwKGySY9Otq_uqk9O3Sv8diSQyY2aIibmwq-0J_lsH6KqatUk3ddIowvQsre7Rvx/s320/Greatest+Hits_500W_500H.jpg" title="The Shirelles - Tonights The Night (1961) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>Tonight's the Night</b>" is the title and lead track from <b>the Shirelles</b>' 1961 album <i>Tonight's the Night</i>. Written by Luther Dixon and Shirley Owens, the song dealt with a woman's feelings before losing her virginity and was released as the pre-album's second single in 1960. In 2010, Rolling Stone listed as one of the 500 greatest songs of all time.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1aw75nNXB8ts16aXwHZ1FuLbyJCAdzzlu",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "The Shirelles",
title: "Tonights The Night",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-39677125574542113262020-06-24T09:45:00.000+02:002020-06-24T09:45:34.438+02:00The Beach Boys - I Get Around (1963)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeNKgCyRmH8YU7BR4mrZKzF4njzcp0IIAgSz-8bP19FiZeQr_c6AoyE-ukEYrn3hPjn_f7dZAjy7T3HfhtLuWw8KjnU4xZUAJpf4RJnJOVIEMChXZHzGbYFMqGiYSjlC_gPqlhY04aXtl5/s1600/I+Get+Around_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="The Beach Boys - I Get Around (1963) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeNKgCyRmH8YU7BR4mrZKzF4njzcp0IIAgSz-8bP19FiZeQr_c6AoyE-ukEYrn3hPjn_f7dZAjy7T3HfhtLuWw8KjnU4xZUAJpf4RJnJOVIEMChXZHzGbYFMqGiYSjlC_gPqlhY04aXtl5/s320/I+Get+Around_500W_500H.jpg" title="The Beach Boys - I Get Around (1963) WLCY Radio Hits" width="320" /></a></div><div style="text-align: justify;">"<b>I Get Around</b>" is a song written by Brian Wilson and Mike Love for American rock band <b>the Beach Boys</b>. It was released as a single in May 1964 with "<b><a href="https://wlcyradio.blogspot.com/2019/04/dont-worry-baby-by-beach-boys-1964.html">Don't Worry Baby</a></b>" as its B-side and became the group's first number-one charting song in the United States. Coming in on the charts at number 7, it became their first top ten hit in the United Kingdom. It was included as the opening track on their studio album All Summer Long in July 1964.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1NNebYslsjr55y7Lb4W9REQI1zFz1_syM",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "The Beach Boys",
title: "I Get Around",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-35273221907408169052020-06-24T09:28:00.001+02:002020-06-24T09:28:52.425+02:00THE BILLBOARD HOT 100 The week of June 27, 2020<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Q0lrNdkl_7tGZ8fMDrj-jla69BdwLmojIDnE2Jjh_euwTuGP6rz61QGX0mx8gqapTmg3qkPeu4GJqy-v0lIJyyOgoOl6-u_8aF7uwu-iD4j99hyEEpnXLcTc8KCOpR_HAoXqwtQHPfZq/s1600/WLCY-Radio-hits-Billboard_hot-100.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="THE BILLBOARD HOT 100 The week of June 27, 2020 WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Q0lrNdkl_7tGZ8fMDrj-jla69BdwLmojIDnE2Jjh_euwTuGP6rz61QGX0mx8gqapTmg3qkPeu4GJqy-v0lIJyyOgoOl6-u_8aF7uwu-iD4j99hyEEpnXLcTc8KCOpR_HAoXqwtQHPfZq/s320/WLCY-Radio-hits-Billboard_hot-100.jpg" title="THE BILLBOARD HOT 100 The week of June 27, 2020 WLCY Radio Hits" width="320" /></a></div>Hi everybody! WLCY Radio Hits Presents complete chart information for the most popular artists and songs on Billboard's Top songs charts. These are the <b>THE BILLBOARD HOT 100 The week of June 27, 2020</b><br />
<div class="separator" style="clear: both;"></div><style type="text/css">
.tg {border-collapse:collapse;border-color:#93a1a1;border-spacing:0;}
.tg td{background-color:#fdf6e3;border-color:#93a1a1;border-style:solid;border-width:1px;color:#002b36;
font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{background-color:#657b83;border-color:#93a1a1;border-style:solid;border-width:1px;color:#fdf6e3;
font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-alz1{background-color:#eee8d5;text-align:left;vertical-align:top}
.tg .tg-amwm{font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-i6s1{background-color:#eee8d5;text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style><br />
<table class="tg"><thead>
<tr>
<th class="tg-amwm">Rank</th>
<th class="tg-amwm">Song</th>
<th class="tg-amwm">Artist</th>
<th class="tg-amwm">Last</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-i6s1">1</td>
<td class="tg-alz1">Trollz</td>
<td class="tg-alz1">6ix9ine & Nicki Minaj</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">2</td>
<td class="tg-0lax">Rockstar</td>
<td class="tg-0lax">DaBaby Featuring Roddy Ricch</td>
<td class="tg-baqh">1</td>
</tr>
<tr>
<td class="tg-i6s1">3</td>
<td class="tg-alz1">The Bigger Picture</td>
<td class="tg-alz1">Lil Baby</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">4</td>
<td class="tg-0lax">Savage</td>
<td class="tg-0lax">Megan Thee Stallion Featuring Beyonce</td>
<td class="tg-baqh">2</td>
</tr>
<tr>
<td class="tg-i6s1">5</td>
<td class="tg-alz1">Blinding Lights</td>
<td class="tg-alz1">The Weeknd</td>
<td class="tg-i6s1">3</td>
</tr>
<tr>
<td class="tg-baqh">6</td>
<td class="tg-0lax">Say So</td>
<td class="tg-0lax">Doja Cat Featuring Nicki Minaj</td>
<td class="tg-baqh">4</td>
</tr>
<tr>
<td class="tg-i6s1">7</td>
<td class="tg-alz1">Intentions</td>
<td class="tg-alz1">Justin Bieber Featuring Quavo</td>
<td class="tg-i6s1">5</td>
</tr>
<tr>
<td class="tg-baqh">8</td>
<td class="tg-0lax">Roses</td>
<td class="tg-0lax">SAINt JHN</td>
<td class="tg-baqh">7</td>
</tr>
<tr>
<td class="tg-i6s1">9</td>
<td class="tg-alz1">Rain On Me</td>
<td class="tg-alz1">Lady Gaga & Ariana Grande</td>
<td class="tg-i6s1">10</td>
</tr>
<tr>
<td class="tg-baqh">10</td>
<td class="tg-0lax">The Box</td>
<td class="tg-0lax">Roddy Ricch</td>
<td class="tg-baqh">9</td>
</tr>
<tr>
<td class="tg-i6s1">11</td>
<td class="tg-alz1">Blueberry Faygo</td>
<td class="tg-alz1">Lil Mosey</td>
<td class="tg-i6s1">12</td>
</tr>
<tr>
<td class="tg-baqh">12</td>
<td class="tg-0lax">Toosie Slide</td>
<td class="tg-0lax">Drake</td>
<td class="tg-baqh">6</td>
</tr>
<tr>
<td class="tg-i6s1">13</td>
<td class="tg-alz1">Circles</td>
<td class="tg-alz1">Post Malone</td>
<td class="tg-i6s1">11</td>
</tr>
<tr>
<td class="tg-baqh">14</td>
<td class="tg-0lax">Don't Start Now</td>
<td class="tg-0lax">Dua Lipa</td>
<td class="tg-baqh">8</td>
</tr>
<tr>
<td class="tg-i6s1">15</td>
<td class="tg-alz1">The Bones</td>
<td class="tg-alz1">Maren Morris</td>
<td class="tg-i6s1">13</td>
</tr>
<tr>
<td class="tg-baqh">16</td>
<td class="tg-0lax">Adore You</td>
<td class="tg-0lax">Harry Styles</td>
<td class="tg-baqh">14</td>
</tr>
<tr>
<td class="tg-i6s1">17</td>
<td class="tg-alz1">Life Is Good</td>
<td class="tg-alz1">Future Featuring Drake</td>
<td class="tg-i6s1">15</td>
</tr>
<tr>
<td class="tg-baqh">18</td>
<td class="tg-0lax">Whats Poppin</td>
<td class="tg-0lax">Jack Harlow</td>
<td class="tg-baqh">16</td>
</tr>
<tr>
<td class="tg-i6s1">19</td>
<td class="tg-alz1">Watermelon Sugar</td>
<td class="tg-alz1">Harry Styles</td>
<td class="tg-i6s1">29</td>
</tr>
<tr>
<td class="tg-baqh">20</td>
<td class="tg-0lax">Falling</td>
<td class="tg-0lax">Trevor Daniel</td>
<td class="tg-baqh">17</td>
</tr>
<tr>
<td class="tg-i6s1">21</td>
<td class="tg-alz1">Sunday Best</td>
<td class="tg-alz1">Surfaces</td>
<td class="tg-i6s1">19</td>
</tr>
<tr>
<td class="tg-baqh">22</td>
<td class="tg-0lax">Party Girl</td>
<td class="tg-0lax">StaySolidRocky</td>
<td class="tg-baqh">21</td>
</tr>
<tr>
<td class="tg-i6s1">23</td>
<td class="tg-alz1">I Hope</td>
<td class="tg-alz1">Gabby Barrett</td>
<td class="tg-i6s1">18</td>
</tr>
<tr>
<td class="tg-baqh">24</td>
<td class="tg-0lax">Death Bed</td>
<td class="tg-0lax">Powfu Featuring beabadoobee</td>
<td class="tg-baqh">23</td>
</tr>
<tr>
<td class="tg-i6s1">25</td>
<td class="tg-alz1">Break My Heart</td>
<td class="tg-alz1">Dua Lipa</td>
<td class="tg-i6s1">26</td>
</tr>
<tr>
<td class="tg-baqh">26</td>
<td class="tg-0lax">Stuck With U</td>
<td class="tg-0lax">Ariana Grande & Justin Bieber</td>
<td class="tg-baqh">20</td>
</tr>
<tr>
<td class="tg-i6s1">27</td>
<td class="tg-alz1">We Paid</td>
<td class="tg-alz1">Lil Baby & 42 Dugg</td>
<td class="tg-i6s1">34</td>
</tr>
<tr>
<td class="tg-baqh">28</td>
<td class="tg-0lax">Hard To Forget</td>
<td class="tg-0lax">Sam Hunt</td>
<td class="tg-baqh">30</td>
</tr>
<tr>
<td class="tg-i6s1">29</td>
<td class="tg-alz1">Before You Go</td>
<td class="tg-alz1">Lewis Capaldi</td>
<td class="tg-i6s1">27</td>
</tr>
<tr>
<td class="tg-baqh">30</td>
<td class="tg-0lax">High Fashion</td>
<td class="tg-0lax">Roddy Ricch Featuring Mustard</td>
<td class="tg-baqh">24</td>
</tr>
<tr>
<td class="tg-i6s1">31</td>
<td class="tg-alz1">Chasin' You</td>
<td class="tg-alz1">Morgan Wallen</td>
<td class="tg-i6s1">22</td>
</tr>
<tr>
<td class="tg-baqh">32</td>
<td class="tg-0lax">The Scotts</td>
<td class="tg-0lax">THE SCOTTS, Travis Scott & Kid Cudi</td>
<td class="tg-baqh">25</td>
</tr>
<tr>
<td class="tg-i6s1">33</td>
<td class="tg-alz1">Bluebird</td>
<td class="tg-alz1">Miranda Lambert</td>
<td class="tg-i6s1">45</td>
</tr>
<tr>
<td class="tg-baqh">34</td>
<td class="tg-0lax">Go Crazy</td>
<td class="tg-0lax">Chris Brown & Young Thug</td>
<td class="tg-baqh">37</td>
</tr>
<tr>
<td class="tg-i6s1">35</td>
<td class="tg-alz1">One Margarita</td>
<td class="tg-alz1">Luke Bryan</td>
<td class="tg-i6s1">39</td>
</tr>
<tr>
<td class="tg-baqh">36</td>
<td class="tg-0lax">Gooba</td>
<td class="tg-0lax">6ix9ine</td>
<td class="tg-baqh">43</td>
</tr>
<tr>
<td class="tg-i6s1">37</td>
<td class="tg-alz1">Emotionally Scarred</td>
<td class="tg-alz1">Lil Baby</td>
<td class="tg-i6s1">47</td>
</tr>
<tr>
<td class="tg-baqh">38</td>
<td class="tg-0lax">Walk Em Down</td>
<td class="tg-0lax">NLE Choppa Featuring Roddy Ricch</td>
<td class="tg-baqh">44</td>
</tr>
<tr>
<td class="tg-i6s1">39</td>
<td class="tg-alz1">Memories</td>
<td class="tg-alz1">Maroon 5</td>
<td class="tg-i6s1">32</td>
</tr>
<tr>
<td class="tg-baqh">40</td>
<td class="tg-0lax">Be Kind</td>
<td class="tg-0lax">Marshmello & Halsey</td>
<td class="tg-baqh">33</td>
</tr>
<tr>
<td class="tg-i6s1">41</td>
<td class="tg-alz1">I Hope You're Happy Now</td>
<td class="tg-alz1">Carly Pearce & Lee Brice</td>
<td class="tg-i6s1">31</td>
</tr>
<tr>
<td class="tg-baqh">42</td>
<td class="tg-0lax">Does To Me</td>
<td class="tg-0lax">Luke Combs Featuring Eric Church</td>
<td class="tg-baqh">28</td>
</tr>
<tr>
<td class="tg-i6s1">43</td>
<td class="tg-alz1">Everything I Wanted</td>
<td class="tg-alz1">Billie Eilish</td>
<td class="tg-i6s1">36</td>
</tr>
<tr>
<td class="tg-baqh">44</td>
<td class="tg-0lax">Nobody But You</td>
<td class="tg-0lax">Blake Shelton Duet With Gwen Stefani</td>
<td class="tg-baqh">38</td>
</tr>
<tr>
<td class="tg-i6s1">45</td>
<td class="tg-alz1">Supalonely</td>
<td class="tg-alz1">BENEE Featuring Gus Dapperton</td>
<td class="tg-i6s1">42</td>
</tr>
<tr>
<td class="tg-baqh">46</td>
<td class="tg-0lax">Here And Now</td>
<td class="tg-0lax">Kenny Chesney</td>
<td class="tg-baqh">49</td>
</tr>
<tr>
<td class="tg-i6s1">47</td>
<td class="tg-alz1">Heartless</td>
<td class="tg-alz1">Diplo Presents Thomas Wesley Featuring Morgan Wallen</td>
<td class="tg-i6s1">41</td>
</tr>
<tr>
<td class="tg-baqh">48</td>
<td class="tg-0lax">After A Few</td>
<td class="tg-0lax">Travis Denning</td>
<td class="tg-baqh">35</td>
</tr>
<tr>
<td class="tg-i6s1">49</td>
<td class="tg-alz1">Dior</td>
<td class="tg-alz1">Pop Smoke</td>
<td class="tg-i6s1">48</td>
</tr>
<tr>
<td class="tg-baqh">50</td>
<td class="tg-0lax">Hot Girl Bummer</td>
<td class="tg-0lax">blackbear</td>
<td class="tg-baqh">46</td>
</tr>
<tr>
<td class="tg-i6s1">51</td>
<td class="tg-alz1">Make It Rain</td>
<td class="tg-alz1">Pop Smoke Featuring Rowdy Rebel</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">52</td>
<td class="tg-0lax">Go!</td>
<td class="tg-0lax">Kid LAROI & Juice WRLD</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">53</td>
<td class="tg-alz1">In Between</td>
<td class="tg-alz1">Scotty McCreery</td>
<td class="tg-i6s1">63</td>
</tr>
<tr>
<td class="tg-baqh">54</td>
<td class="tg-0lax">Shotta Flow 5</td>
<td class="tg-0lax">NLE Choppa</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">55</td>
<td class="tg-alz1">If The World Was Ending</td>
<td class="tg-alz1">JP Saxe Featuring Julia Michaels</td>
<td class="tg-i6s1">53</td>
</tr>
<tr>
<td class="tg-baqh">56</td>
<td class="tg-0lax">Don't Rush</td>
<td class="tg-0lax">Young T & Bugsey Featuring Headie One</td>
<td class="tg-baqh">71</td>
</tr>
<tr>
<td class="tg-i6s1">57</td>
<td class="tg-alz1">Die From A Broken Heart</td>
<td class="tg-alz1">Maddie & Tae</td>
<td class="tg-i6s1">60</td>
</tr>
<tr>
<td class="tg-baqh">58</td>
<td class="tg-0lax">Beer Can't Fix</td>
<td class="tg-0lax">Thomas Rhett Featuring Jon Pardi</td>
<td class="tg-baqh">51</td>
</tr>
<tr>
<td class="tg-i6s1">59</td>
<td class="tg-alz1">Snow On Tha Bluff</td>
<td class="tg-alz1">J. Cole</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">60</td>
<td class="tg-0lax">I Love My Country</td>
<td class="tg-0lax">Florida Georgia Line</td>
<td class="tg-baqh">56</td>
</tr>
<tr>
<td class="tg-i6s1">61</td>
<td class="tg-alz1">P*$$y Fairy (OTW)</td>
<td class="tg-alz1">Jhene Aiko</td>
<td class="tg-i6s1">61</td>
</tr>
<tr>
<td class="tg-baqh">62</td>
<td class="tg-0lax">Chicago Freestyle</td>
<td class="tg-0lax">Drake Featuring Giveon</td>
<td class="tg-baqh">52</td>
</tr>
<tr>
<td class="tg-i6s1">63</td>
<td class="tg-alz1">After Party</td>
<td class="tg-alz1">Don Toliver</td>
<td class="tg-i6s1">57</td>
</tr>
<tr>
<td class="tg-baqh">64</td>
<td class="tg-0lax">Be A Light</td>
<td class="tg-0lax">Thomas Rhett Featuring Reba McEntire, Hillary Scott, Chris Tomlin & Keith Urban</td>
<td class="tg-baqh">58</td>
</tr>
<tr>
<td class="tg-i6s1">65</td>
<td class="tg-alz1">Tommy Lee</td>
<td class="tg-alz1">Tyla Yaweh & Post Malone</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">66</td>
<td class="tg-0lax">Believe It</td>
<td class="tg-0lax">PARTYNEXTDOOR & Rihanna</td>
<td class="tg-baqh">62</td>
</tr>
<tr>
<td class="tg-i6s1">67</td>
<td class="tg-alz1">In Your Eyes</td>
<td class="tg-alz1">The Weeknd</td>
<td class="tg-i6s1">54</td>
</tr>
<tr>
<td class="tg-baqh">68</td>
<td class="tg-0lax">Flex</td>
<td class="tg-0lax">Polo G Featuring Juice WRLD</td>
<td class="tg-baqh">59</td>
</tr>
<tr>
<td class="tg-i6s1">69</td>
<td class="tg-alz1">God Whispered Your Name</td>
<td class="tg-alz1">Keith Urban</td>
<td class="tg-i6s1">65</td>
</tr>
<tr>
<td class="tg-baqh">70</td>
<td class="tg-0lax">Yo Perreo Sola</td>
<td class="tg-0lax">Bad Bunny</td>
<td class="tg-baqh">66</td>
</tr>
<tr>
<td class="tg-i6s1">71</td>
<td class="tg-alz1">Got What I Got</td>
<td class="tg-alz1">Jason Aldean</td>
<td class="tg-i6s1">76</td>
</tr>
<tr>
<td class="tg-baqh">72</td>
<td class="tg-0lax">ily</td>
<td class="tg-0lax">surf mesa Featuring Emilee</td>
<td class="tg-baqh">97</td>
</tr>
<tr>
<td class="tg-i6s1">73</td>
<td class="tg-alz1">Mamacita</td>
<td class="tg-alz1">Black Eyed Peas, Ozuna + J.Rey Soul</td>
<td class="tg-i6s1">90</td>
</tr>
<tr>
<td class="tg-baqh">74</td>
<td class="tg-0lax">Need It</td>
<td class="tg-0lax">Migos Featuring YoungBoy Never Broke Again</td>
<td class="tg-baqh">72</td>
</tr>
<tr>
<td class="tg-i6s1">75</td>
<td class="tg-alz1">Dollaz On My Head</td>
<td class="tg-alz1">Gunna Featuring Young Thug</td>
<td class="tg-i6s1">73</td>
</tr>
<tr>
<td class="tg-baqh">76</td>
<td class="tg-0lax">Daisies</td>
<td class="tg-0lax">Katy Perry</td>
<td class="tg-baqh">69</td>
</tr>
<tr>
<td class="tg-i6s1">77</td>
<td class="tg-alz1">One Big Country Song</td>
<td class="tg-alz1">LOCASH</td>
<td class="tg-i6s1">78</td>
</tr>
<tr>
<td class="tg-baqh">78</td>
<td class="tg-0lax">Grace</td>
<td class="tg-0lax">Lil Baby & 42 Dugg</td>
<td class="tg-baqh">81</td>
</tr>
<tr>
<td class="tg-i6s1">79</td>
<td class="tg-alz1">Level Of Concern</td>
<td class="tg-alz1">twenty one pilots</td>
<td class="tg-i6s1">70</td>
</tr>
<tr>
<td class="tg-baqh">80</td>
<td class="tg-0lax">X</td>
<td class="tg-0lax">Jonas Brothers Featuring Karol G</td>
<td class="tg-baqh">68</td>
</tr>
<tr>
<td class="tg-i6s1">81</td>
<td class="tg-alz1">Savage Love (Laxed - Siren Beat)</td>
<td class="tg-alz1">Jawsh 685 x Jason Derulo</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">82</td>
<td class="tg-0lax">Ride It.</td>
<td class="tg-0lax">Regard</td>
<td class="tg-baqh">67</td>
</tr>
<tr>
<td class="tg-i6s1">83</td>
<td class="tg-alz1">Do It</td>
<td class="tg-alz1">Chloe X Halle</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">84</td>
<td class="tg-0lax">21</td>
<td class="tg-0lax">Polo G</td>
<td class="tg-baqh">98</td>
</tr>
<tr>
<td class="tg-i6s1">85</td>
<td class="tg-alz1">Like That</td>
<td class="tg-alz1">Doja Cat Featuring Gucci Mane</td>
<td class="tg-i6s1">79</td>
</tr>
<tr>
<td class="tg-baqh">86</td>
<td class="tg-0lax">Why We Drink</td>
<td class="tg-0lax">Justin Moore</td>
<td class="tg-baqh">83</td>
</tr>
<tr>
<td class="tg-i6s1">87</td>
<td class="tg-alz1">Otherside Of America</td>
<td class="tg-alz1">Meek Mill</td>
<td class="tg-i6s1">64</td>
</tr>
<tr>
<td class="tg-baqh">88</td>
<td class="tg-0lax">Drinking Alone</td>
<td class="tg-0lax">Carrie Underwood</td>
<td class="tg-baqh">74</td>
</tr>
<tr>
<td class="tg-i6s1">89</td>
<td class="tg-alz1">Righteous</td>
<td class="tg-alz1">Juice WRLD</td>
<td class="tg-i6s1">75</td>
</tr>
<tr>
<td class="tg-baqh">90</td>
<td class="tg-0lax">Girl Of My Dreams</td>
<td class="tg-0lax">Rod Wave</td>
<td class="tg-baqh">84</td>
</tr>
<tr>
<td class="tg-i6s1">91</td>
<td class="tg-alz1">One Beer</td>
<td class="tg-alz1">HARDY Featuring Lauren Alaina & Devin Dawson</td>
<td class="tg-i6s1">87</td>
</tr>
<tr>
<td class="tg-baqh">92</td>
<td class="tg-0lax">Done</td>
<td class="tg-0lax">Chris Janson</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">93</td>
<td class="tg-alz1">Cool Again</td>
<td class="tg-alz1">Kane Brown</td>
<td class="tg-i6s1">85</td>
</tr>
<tr>
<td class="tg-baqh">94</td>
<td class="tg-0lax">Deep End Freestyle</td>
<td class="tg-0lax">Sleepy Hallow</td>
<td class="tg-baqh">80</td>
</tr>
<tr>
<td class="tg-i6s1">95</td>
<td class="tg-alz1">All In</td>
<td class="tg-alz1">Lil Baby</td>
<td class="tg-i6s1">91</td>
</tr>
<tr>
<td class="tg-baqh">96</td>
<td class="tg-0lax">The Man Who Loves You The Most</td>
<td class="tg-0lax">Zac Brown Band</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">97</td>
<td class="tg-alz1">One Night Standards</td>
<td class="tg-alz1">Ashley McBryde</td>
<td class="tg-i6s1">93</td>
</tr>
<tr>
<td class="tg-baqh">98</td>
<td class="tg-0lax">One Of Them Girls</td>
<td class="tg-0lax">Lee Brice</td>
<td class="tg-baqh">94</td>
</tr>
<tr>
<td class="tg-i6s1">99</td>
<td class="tg-alz1">July</td>
<td class="tg-alz1">Noah Cyrus & Leon Bridges</td>
<td class="tg-i6s1">88</td>
</tr>
<tr>
<td class="tg-baqh">100</td>
<td class="tg-0lax">Need Me</td>
<td class="tg-0lax">J.I.</td>
<td class="tg-baqh">-</td>
</tr>
</tbody>
</table>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-35243607001274340872020-06-22T10:47:00.002+02:002020-06-22T10:47:35.763+02:00Frankie Valli & The Four Seasons - Dawn (Go Away) (1964)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlIHC7lq_nVttbiSAai8t0nHW0lUBsgNs-UUtycEoioff3d3zOILEJ8SPQMc1JETSAZbsnS3b5EGVYWCHwxw9BYaXMoWBiBZEYUuPb_WQrgrg7plko98DiVk_EKmCRl5zx5kztiR8l_YO/s1600/Frankie+Valli+%2526+The+Four+Seasons+-+Dawn+%2528Go+Away%2529_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Frankie Valli & The Four Seasons - Dawn (Go Away) (1964)" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlIHC7lq_nVttbiSAai8t0nHW0lUBsgNs-UUtycEoioff3d3zOILEJ8SPQMc1JETSAZbsnS3b5EGVYWCHwxw9BYaXMoWBiBZEYUuPb_WQrgrg7plko98DiVk_EKmCRl5zx5kztiR8l_YO/s320/Frankie+Valli+%2526+The+Four+Seasons+-+Dawn+%2528Go+Away%2529_500W_500H.jpg" title="Frankie Valli & The Four Seasons - Dawn (Go Away) (1964)" width="300" /></a></div><div style="text-align: justify;">"<b>Dawn (Go Away)</b>" is a song written by Bob Gaudio and Sandy Linzer and recorded by <b>The Four Seasons</b> in early January 1964. It took four weeks to climb the Billboard Hot 100 chart to #3 on February 29, 1964, prevented from going higher by The Beatles' "<b><a href="https://wlcyradio.blogspot.com/2019/05/i-want-to-hold-your-hand-by-beatles-1963.html">I Want to Hold Your Hand</a></b>" and "<b><a href="https://wlcyradio.blogspot.com/2019/07/she-loves-you-live-at-bbc-by-beatles.html">She Loves You</a></b>", which turned out to be the top two singles of 1964. "Dawn" remained at #3 for three weeks, then dropped to make way for two further Beatles singles ("Twist and Shout" and "<b><a href="https://wlcyradio.blogspot.com/2016/04/the-beatles-please-please-me-on-please.html">Please Please Me</a></b>"). During its six-week run in the Top Ten, only Beatles hits ranked above it in the chart.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=13BvP1ZqBJ4DOXtombJ6V25GecvmTIv9G",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Frankie Valli & The Four Seasons ",
title: "Dawn (Go Away)",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-12211358979461011762020-06-19T19:05:00.002+02:002020-06-19T19:05:19.119+02:00Jan & Dean - Baby Talk (1959)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25Cl7C4k-ZOJcMTmifrvoHpEH4iYEn_8rUiL7SNmg1UmzRXwctIkveitwtTXL4ak6AHu0kY6QzJd5Ns-NwHPeoHponNp4GAaM0YCUI8jF-kSOuuE7G7t4Ec7aRfKZ6MImA8vsQEUHJXHz/s1600/Golden+Hits+Vol.+1_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Jan & Dean - Baby Talk (1959) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25Cl7C4k-ZOJcMTmifrvoHpEH4iYEn_8rUiL7SNmg1UmzRXwctIkveitwtTXL4ak6AHu0kY6QzJd5Ns-NwHPeoHponNp4GAaM0YCUI8jF-kSOuuE7G7t4Ec7aRfKZ6MImA8vsQEUHJXHz/s320/Golden+Hits+Vol.+1_500W_500H.jpg" title="Jan & Dean - Baby Talk (1959) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>Baby Talk</b>" is a 1959 song by <b>Jan and Dean</b> which was a Top 10 hit for them on Dore Records. The song spent 12 weeks on the Billboard Hot 100 chart peaking at No. 10, while reaching No. 28 on Billboard's Hot R&B Sides. While not usually considered part of the "surf pop" genre, it contains many elements of what would become the signature sound of southern California in the early '60s such as the close vocal harmonies combined with falsetto sounds. Original pressings of the single were mislabeled as by "Jan & Arnie"; this was later corrected.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1UwUrUCbv5nZTH4KQo9OtRY_E_yQR4A97",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46s9I3a_dkntUk8tos7-NIrw87lQ4xKZGyTHV3iCbGxm2sOSrR5UbT_bLvlpOnTKsCI2pdyapPZyOCif-XF63NVln80cImf4j7mvyECjZGi7bRwjOuNfFkjASLWc1Q7mfsnLY4mW11oGJ/s1600/50s-big-hits-800.png",
artist: "Jan & Dean",
title: "Baby Talk",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-57810220870232156872020-06-19T17:49:00.002+02:002020-06-19T17:49:39.793+02:00Floyd Robinson - Makin' Love (1959)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxL-tTF0L1nlq4uVMu80WMOdiMGWA_1u1KsqmN1wQE9R_l0ZsIi_HzV82RK8H2_lu-jgXS7AN1usbONmAAnOtIAJl5YXl7ZBkp7qJoHInDEMgs0424lMQq343VvLDLS4-q5qwCUziL6Ouh/s1600/Nippers+50%2527s-Vol.1_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Floyd Robinson - Makin' Love (1959) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxL-tTF0L1nlq4uVMu80WMOdiMGWA_1u1KsqmN1wQE9R_l0ZsIi_HzV82RK8H2_lu-jgXS7AN1usbONmAAnOtIAJl5YXl7ZBkp7qJoHInDEMgs0424lMQq343VvLDLS4-q5qwCUziL6Ouh/s320/Nippers+50%2527s-Vol.1_500W_500H.jpg" title="Floyd Robinson - Makin' Love (1959) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>Makin' Love</b>" is a song written and originally released by American country singer <b>Floyd Robinson</b>. He released it as a single in 1959.</div><br />
<div style="text-align: justify;">The song became a hit on the both sides of Atlantic. In the United states it reached no. 20 on the Billboard Hot 100 and no. 27 on the Billboard Black Singles chart. In the UK it reached no. 9 on the national singles chart.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1D-ll_KoThK14HJ2-0oxEud-QkuQvh8Cf",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46s9I3a_dkntUk8tos7-NIrw87lQ4xKZGyTHV3iCbGxm2sOSrR5UbT_bLvlpOnTKsCI2pdyapPZyOCif-XF63NVln80cImf4j7mvyECjZGi7bRwjOuNfFkjASLWc1Q7mfsnLY4mW11oGJ/s1600/50s-big-hits-800.png",
artist: "Floyd Robinson",
title: "Makin' Love",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-87105168234861580432020-06-19T17:33:00.000+02:002020-06-19T17:33:10.889+02:00Sandy Nelson - Teen Beat (1959)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo1tlkzQ4tZF7d5B76unOGGIGY_Gamg0Td5TNglxLjzM7f78nWl16wOG01mwJuT9kxaVDVk2uEQXGRtdKA2uM97sPUVyYnfV7riyZziDwhra31fLREv1Vf4BVVEhmjbm807yPTUQtA34aO/s1600/Plays+Teen+Beat_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Sandy Nelson - Teen Beat (1959) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo1tlkzQ4tZF7d5B76unOGGIGY_Gamg0Td5TNglxLjzM7f78nWl16wOG01mwJuT9kxaVDVk2uEQXGRtdKA2uM97sPUVyYnfV7riyZziDwhra31fLREv1Vf4BVVEhmjbm807yPTUQtA34aO/s320/Plays+Teen+Beat_500W_500H.jpg" title="Sandy Nelson - Teen Beat (1959) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>Teen Beat</b>" is a 1959 instrumental number by <b>Sandy Nelson</b>. Released on Original Sound Records, it rose to number 4 on the Billboard Hot 100 chart in 1959. It sold over one million copies, and was awarded a gold disc. In addition, the song made #17 on the R&B Singles Chart and #9 on the UK Singles Chart. The song also made #36 on the Billboard Year-End Hot 100 singles of 1959.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1xwNzr-FKpttdeQJEOiTQ6fXK87IKpLhJ",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46s9I3a_dkntUk8tos7-NIrw87lQ4xKZGyTHV3iCbGxm2sOSrR5UbT_bLvlpOnTKsCI2pdyapPZyOCif-XF63NVln80cImf4j7mvyECjZGi7bRwjOuNfFkjASLWc1Q7mfsnLY4mW11oGJ/s1600/50s-big-hits-800.png",
artist: "Sandy Nelson",
title: "Teen Beat",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-42173338131170018782020-06-17T21:37:00.000+02:002020-06-17T21:37:03.393+02:00Sarah Vaughan - Broken Hearted Melody (1959)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24iR1oxxZbqd8zV_I7xcvCcTdR8Cs8GdWl6oKDYcHVJ_yphC3Zu3rXRXr_SJua08Yy7A-8sF9tY-Gv2PJ5f2AMRgEncgImUzK0BbpvPklRsScXwV2HTxUPgOBrKZ7n-diehnvI6vtZmbY/s1600/Sarah+Vaughan%2527s+Finest+Hour_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Sarah Vaughan - Broken Hearted Melody (1959) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24iR1oxxZbqd8zV_I7xcvCcTdR8Cs8GdWl6oKDYcHVJ_yphC3Zu3rXRXr_SJua08Yy7A-8sF9tY-Gv2PJ5f2AMRgEncgImUzK0BbpvPklRsScXwV2HTxUPgOBrKZ7n-diehnvI6vtZmbY/s320/Sarah+Vaughan%2527s+Finest+Hour_500W_500H.jpg" title="Sarah Vaughan - Broken Hearted Melody (1959) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>Broken Hearted Melody</b>" is a popular song first published in 1958. The words were written by Hal David and the music by Sherman Edwards. The song became a major hit for <b>Sarah Vaughan</b> in 1959, peaking at #7 in the Billboard Charts and #5 on the R&B charts.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1IXlUPH_-9Cl8cCSDSdpjsiL3axT7t-Pw",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46s9I3a_dkntUk8tos7-NIrw87lQ4xKZGyTHV3iCbGxm2sOSrR5UbT_bLvlpOnTKsCI2pdyapPZyOCif-XF63NVln80cImf4j7mvyECjZGi7bRwjOuNfFkjASLWc1Q7mfsnLY4mW11oGJ/s1600/50s-big-hits-800.png",
artist: "Sarah Vaughan",
title: "Broken Hearted Melody",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-16442794903709623542020-06-17T20:51:00.001+02:002020-06-17T20:51:27.625+02:00The Sunshine Company - Happy (1967)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu1IxRkri4Os0fzzub8nrF9w3T-ssMuTNFPYziUtsTWIpOCEvoSl_5wG0afZkmobGSSFEQRqNApDlHT6eZDe6OVsCHZW5LjECFZfK84uM49vefYlqdm-L6oBoVmJY-qxpk003cmWHWrKz0/s1600/The+Best+Of+The+Sunshine+Company_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="The Sunshine Company - Happy (1967) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu1IxRkri4Os0fzzub8nrF9w3T-ssMuTNFPYziUtsTWIpOCEvoSl_5wG0afZkmobGSSFEQRqNApDlHT6eZDe6OVsCHZW5LjECFZfK84uM49vefYlqdm-L6oBoVmJY-qxpk003cmWHWrKz0/s320/The+Best+Of+The+Sunshine+Company_500W_500H.jpg" title="The Sunshine Company - Happy (1967) WLCY Radio Hits" width="320" /></a></div><div style="text-align: justify;">"<b>Happy</b>" is a 1967 song written by Vinny Gormann and Tony Michaels and performed by <b>The Sunshine Company</b> an American sunshine pop band from Los Angeles, California.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1lABFiHcnH-_fJul607NFaf4j-T_lVg6f",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "The Sunshine Company",
title: "Happy",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-55671321476827237812020-06-17T20:05:00.000+02:002020-06-17T20:05:56.235+02:00THE BILLBOARD HOT 100 The week of June 20, 2020<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Q0lrNdkl_7tGZ8fMDrj-jla69BdwLmojIDnE2Jjh_euwTuGP6rz61QGX0mx8gqapTmg3qkPeu4GJqy-v0lIJyyOgoOl6-u_8aF7uwu-iD4j99hyEEpnXLcTc8KCOpR_HAoXqwtQHPfZq/s1600/WLCY-Radio-hits-Billboard_hot-100.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="THE BILLBOARD HOT 100 The week of June 20, 2020" border="0" data-original-height="500" data-original-width="500" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Q0lrNdkl_7tGZ8fMDrj-jla69BdwLmojIDnE2Jjh_euwTuGP6rz61QGX0mx8gqapTmg3qkPeu4GJqy-v0lIJyyOgoOl6-u_8aF7uwu-iD4j99hyEEpnXLcTc8KCOpR_HAoXqwtQHPfZq/s320/WLCY-Radio-hits-Billboard_hot-100.jpg" title="THE BILLBOARD HOT 100 The week of June 20, 2020" width="320" /></a></div><div style="text-align: justify;">Hi everybody! <b>WLCY Radio Hits</b> Presents complete chart information for the most popular artists and songs on Billboard's Top songs charts. These are the Billboard <b>THE BILLBOARD HOT 100</b> The week of June 20, 2020</div><style type="text/css">
.tg {border-collapse:collapse;border-color:#93a1a1;border-spacing:0;}
.tg td{background-color:#fdf6e3;border-color:#93a1a1;border-style:solid;border-width:1px;color:#002b36;
font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{background-color:#657b83;border-color:#93a1a1;border-style:solid;border-width:1px;color:#fdf6e3;
font-family:Arial, sans-serif;font-size:14px;font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-baqh{text-align:center;vertical-align:top}
.tg .tg-alz1{background-color:#eee8d5;text-align:left;vertical-align:top}
.tg .tg-amwm{font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-i6s1{background-color:#eee8d5;text-align:center;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style><br />
<table class="tg" style="undefined;table-layout: fixed; width: 694px"><colgroup>
<col style="width: 50px">
<col style="width: 181px">
<col style="width: 376px">
<col style="width: 87px">
</colgroup>
<thead>
<tr>
<th class="tg-amwm">Rank</th>
<th class="tg-amwm">Song</th>
<th class="tg-amwm">Artist</th>
<th class="tg-amwm">Last Week</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-i6s1">1</td>
<td class="tg-alz1">Rockstar</td>
<td class="tg-alz1">DaBaby Featuring Roddy Ricch</td>
<td class="tg-i6s1">1</td>
</tr>
<tr>
<td class="tg-baqh">2</td>
<td class="tg-0lax">Savage</td>
<td class="tg-0lax">Megan Thee Stallion Featuring Beyonce</td>
<td class="tg-baqh">2</td>
</tr>
<tr>
<td class="tg-i6s1">3</td>
<td class="tg-alz1">Blinding Lights</td>
<td class="tg-alz1">The Weeknd</td>
<td class="tg-i6s1">3</td>
</tr>
<tr>
<td class="tg-baqh">4</td>
<td class="tg-0lax">Say So</td>
<td class="tg-0lax">Doja Cat Featuring Nicki Minaj</td>
<td class="tg-baqh">4</td>
</tr>
<tr>
<td class="tg-i6s1">5</td>
<td class="tg-alz1">Intentions</td>
<td class="tg-alz1">Justin Bieber Featuring Quavo</td>
<td class="tg-i6s1">8</td>
</tr>
<tr>
<td class="tg-baqh">6</td>
<td class="tg-0lax">Toosie Slide</td>
<td class="tg-0lax">Drake</td>
<td class="tg-baqh">6</td>
</tr>
<tr>
<td class="tg-i6s1">7</td>
<td class="tg-alz1">Roses</td>
<td class="tg-alz1">SAINt JHN</td>
<td class="tg-i6s1">10</td>
</tr>
<tr>
<td class="tg-baqh">8</td>
<td class="tg-0lax">Don't Start Now</td>
<td class="tg-0lax">Dua Lipa</td>
<td class="tg-baqh">7</td>
</tr>
<tr>
<td class="tg-i6s1">9</td>
<td class="tg-alz1">The Box</td>
<td class="tg-alz1">Roddy Ricch</td>
<td class="tg-i6s1">9</td>
</tr>
<tr>
<td class="tg-baqh">10</td>
<td class="tg-0lax">Rain On Me</td>
<td class="tg-0lax">Lady Gaga & Ariana Grande</td>
<td class="tg-baqh">5</td>
</tr>
<tr>
<td class="tg-i6s1">11</td>
<td class="tg-alz1">Circles</td>
<td class="tg-alz1">Post Malone</td>
<td class="tg-i6s1">11</td>
</tr>
<tr>
<td class="tg-baqh">12</td>
<td class="tg-0lax">Blueberry Faygo</td>
<td class="tg-0lax">Lil Mosey</td>
<td class="tg-baqh">15</td>
</tr>
<tr>
<td class="tg-i6s1">13</td>
<td class="tg-alz1">The Bones</td>
<td class="tg-alz1">Maren Morris</td>
<td class="tg-i6s1">14</td>
</tr>
<tr>
<td class="tg-baqh">14</td>
<td class="tg-0lax">Adore You</td>
<td class="tg-0lax">Harry Styles</td>
<td class="tg-baqh">12</td>
</tr>
<tr>
<td class="tg-i6s1">15</td>
<td class="tg-alz1">Life Is Good</td>
<td class="tg-alz1">Future Featuring Drake</td>
<td class="tg-i6s1">13</td>
</tr>
<tr>
<td class="tg-baqh">16</td>
<td class="tg-0lax">Whats Poppin</td>
<td class="tg-0lax">Jack Harlow</td>
<td class="tg-baqh">21</td>
</tr>
<tr>
<td class="tg-i6s1">17</td>
<td class="tg-alz1">Falling</td>
<td class="tg-alz1">Trevor Daniel</td>
<td class="tg-i6s1">18</td>
</tr>
<tr>
<td class="tg-baqh">18</td>
<td class="tg-0lax">I Hope</td>
<td class="tg-0lax">Gabby Barrett</td>
<td class="tg-baqh">19</td>
</tr>
<tr>
<td class="tg-i6s1">19</td>
<td class="tg-alz1">Sunday Best</td>
<td class="tg-alz1">Surfaces</td>
<td class="tg-i6s1">20</td>
</tr>
<tr>
<td class="tg-baqh">20</td>
<td class="tg-0lax">Stuck With U</td>
<td class="tg-0lax">Ariana Grande & Justin Bieber</td>
<td class="tg-baqh">17</td>
</tr>
<tr>
<td class="tg-i6s1">21</td>
<td class="tg-alz1">Party Girl</td>
<td class="tg-alz1">StaySolidRocky</td>
<td class="tg-i6s1">26</td>
</tr>
<tr>
<td class="tg-baqh">22</td>
<td class="tg-0lax">Chasin' You</td>
<td class="tg-0lax">Morgan Wallen</td>
<td class="tg-baqh">16</td>
</tr>
<tr>
<td class="tg-i6s1">23</td>
<td class="tg-alz1">Death Bed</td>
<td class="tg-alz1">Powfu Featuring beabadoobee</td>
<td class="tg-i6s1">24</td>
</tr>
<tr>
<td class="tg-baqh">24</td>
<td class="tg-0lax">High Fashion</td>
<td class="tg-0lax">Roddy Ricch Featuring Mustard</td>
<td class="tg-baqh">23</td>
</tr>
<tr>
<td class="tg-i6s1">25</td>
<td class="tg-alz1">The Scotts</td>
<td class="tg-alz1">The Scott, Travis Scott & Kid Cudi</td>
<td class="tg-i6s1">22</td>
</tr>
<tr>
<td class="tg-baqh">26</td>
<td class="tg-0lax">Break My Heart</td>
<td class="tg-0lax">Dua Lipa</td>
<td class="tg-baqh">29</td>
</tr>
<tr>
<td class="tg-i6s1">27</td>
<td class="tg-alz1">Before You Go</td>
<td class="tg-alz1">Lewis Capaldi</td>
<td class="tg-i6s1">28</td>
</tr>
<tr>
<td class="tg-baqh">28</td>
<td class="tg-0lax">Does To Me</td>
<td class="tg-0lax">Luke Combs Featuring Eric Church</td>
<td class="tg-baqh">25</td>
</tr>
<tr>
<td class="tg-i6s1">29</td>
<td class="tg-alz1">Watermelon Sugar</td>
<td class="tg-alz1">Harry Styles</td>
<td class="tg-i6s1">40</td>
</tr>
<tr>
<td class="tg-baqh">30</td>
<td class="tg-0lax">Hard To Forget</td>
<td class="tg-0lax">Sam Hunt</td>
<td class="tg-baqh">30</td>
</tr>
<tr>
<td class="tg-i6s1">31</td>
<td class="tg-alz1">I Hope You're Happy Now</td>
<td class="tg-alz1">Carly Pearce & Lee Brice</td>
<td class="tg-i6s1">27</td>
</tr>
<tr>
<td class="tg-baqh">32</td>
<td class="tg-0lax">Memories</td>
<td class="tg-0lax">Maroon 5</td>
<td class="tg-baqh">32</td>
</tr>
<tr>
<td class="tg-i6s1">33</td>
<td class="tg-alz1">Be Kind</td>
<td class="tg-alz1">Marshmello & Halsey</td>
<td class="tg-i6s1">36</td>
</tr>
<tr>
<td class="tg-baqh">34</td>
<td class="tg-0lax">We Paid</td>
<td class="tg-0lax">Lil Baby & 42 Dugg</td>
<td class="tg-baqh">55</td>
</tr>
<tr>
<td class="tg-i6s1">35</td>
<td class="tg-alz1">After A Few</td>
<td class="tg-alz1">Travis Denning</td>
<td class="tg-i6s1">31</td>
</tr>
<tr>
<td class="tg-baqh">36</td>
<td class="tg-0lax">Everything I Wanted</td>
<td class="tg-0lax">Billie Eilish</td>
<td class="tg-baqh">38</td>
</tr>
<tr>
<td class="tg-i6s1">37</td>
<td class="tg-alz1">Go Crazy</td>
<td class="tg-alz1">Chris Brown & Young Thug</td>
<td class="tg-i6s1">50</td>
</tr>
<tr>
<td class="tg-baqh">38</td>
<td class="tg-0lax">Nobody But You</td>
<td class="tg-0lax">Blake Shelton Duet With Gwen Stefani</td>
<td class="tg-baqh">35</td>
</tr>
<tr>
<td class="tg-i6s1">39</td>
<td class="tg-alz1">One Margarita</td>
<td class="tg-alz1">Luke Bryan</td>
<td class="tg-i6s1">44</td>
</tr>
<tr>
<td class="tg-baqh">40</td>
<td class="tg-0lax">My Oh My</td>
<td class="tg-0lax">Camila Cabello Featuring DaBaby</td>
<td class="tg-baqh">34</td>
</tr>
<tr>
<td class="tg-i6s1">41</td>
<td class="tg-alz1">Heartless</td>
<td class="tg-alz1">Diplo Presents Thomas Wesley Featuring Morgan Wallen</td>
<td class="tg-i6s1">39</td>
</tr>
<tr>
<td class="tg-baqh">42</td>
<td class="tg-0lax">Supalonely</td>
<td class="tg-0lax">BENEE Featuring Gus Dapperton</td>
<td class="tg-baqh">43</td>
</tr>
<tr>
<td class="tg-i6s1">43</td>
<td class="tg-alz1">Gooba</td>
<td class="tg-alz1">6ix9ine</td>
<td class="tg-i6s1">37</td>
</tr>
<tr>
<td class="tg-baqh">44</td>
<td class="tg-0lax">Walk Em Down</td>
<td class="tg-0lax">NLE Choppa Featuring Roddy Ricch</td>
<td class="tg-baqh">45</td>
</tr>
<tr>
<td class="tg-i6s1">45</td>
<td class="tg-alz1">Bluebird</td>
<td class="tg-alz1">Miranda Lambert</td>
<td class="tg-i6s1">46</td>
</tr>
<tr>
<td class="tg-baqh">46</td>
<td class="tg-0lax">Hot Girl Bummer</td>
<td class="tg-0lax">blackbear</td>
<td class="tg-baqh">47</td>
</tr>
<tr>
<td class="tg-i6s1">47</td>
<td class="tg-alz1">Emotionally Scarred</td>
<td class="tg-alz1">Lil Baby</td>
<td class="tg-i6s1">52</td>
</tr>
<tr>
<td class="tg-baqh">48</td>
<td class="tg-0lax">Dior</td>
<td class="tg-0lax">Pop Smoke</td>
<td class="tg-baqh">54</td>
</tr>
<tr>
<td class="tg-i6s1">49</td>
<td class="tg-alz1">Here And Now</td>
<td class="tg-alz1">Kenny Chesney</td>
<td class="tg-i6s1">48</td>
</tr>
<tr>
<td class="tg-baqh">50</td>
<td class="tg-0lax">Dance Monkey</td>
<td class="tg-0lax">Tones And I</td>
<td class="tg-baqh">49</td>
</tr>
<tr>
<td class="tg-i6s1">51</td>
<td class="tg-alz1">Beer Can't Fix</td>
<td class="tg-alz1">Thomas Rhett Featuring Jon Pardi</td>
<td class="tg-i6s1">51</td>
</tr>
<tr>
<td class="tg-baqh">52</td>
<td class="tg-0lax">Chicago Freestyle</td>
<td class="tg-0lax">Drake Featuring Giveon</td>
<td class="tg-baqh">59</td>
</tr>
<tr>
<td class="tg-i6s1">53</td>
<td class="tg-alz1">If The World Was Ending</td>
<td class="tg-alz1">JP Saxe Featuring Julia Michaels</td>
<td class="tg-i6s1">58</td>
</tr>
<tr>
<td class="tg-baqh">54</td>
<td class="tg-0lax">In Your Eyes</td>
<td class="tg-0lax">The Weeknd</td>
<td class="tg-baqh">53</td>
</tr>
<tr>
<td class="tg-i6s1">55</td>
<td class="tg-alz1">Out West</td>
<td class="tg-alz1">JACKBOYS Featuring Young Thug</td>
<td class="tg-i6s1">61</td>
</tr>
<tr>
<td class="tg-baqh">56</td>
<td class="tg-0lax">I Love My Country</td>
<td class="tg-0lax">Florida Georgia Line</td>
<td class="tg-baqh">62</td>
</tr>
<tr>
<td class="tg-i6s1">57</td>
<td class="tg-alz1">After Party</td>
<td class="tg-alz1">Don Toliver</td>
<td class="tg-i6s1">57</td>
</tr>
<tr>
<td class="tg-baqh">58</td>
<td class="tg-0lax">Be A Light</td>
<td class="tg-0lax">"Thomas Rhett Featuring Reba McEntire, Hillary Scott, Chris Tomlin & Keith Urban</td>
<td class="tg-baqh">60</td>
</tr>
<tr>
<td class="tg-i6s1">59</td>
<td class="tg-alz1">Flex</td>
<td class="tg-alz1">Polo G Featuring Juice WRLD</td>
<td class="tg-i6s1">56</td>
</tr>
<tr>
<td class="tg-baqh">60</td>
<td class="tg-0lax">Die From A Broken Heart</td>
<td class="tg-0lax">Maddie & Tae</td>
<td class="tg-baqh">70</td>
</tr>
<tr>
<td class="tg-i6s1">61</td>
<td class="tg-alz1">P*$$y Fairy (OTW)</td>
<td class="tg-alz1">Jhene Aiko</td>
<td class="tg-i6s1">68</td>
</tr>
<tr>
<td class="tg-baqh">62</td>
<td class="tg-0lax">Believe It</td>
<td class="tg-0lax">PARTYNEXTDOOR & Rihanna</td>
<td class="tg-baqh">63</td>
</tr>
<tr>
<td class="tg-i6s1">63</td>
<td class="tg-alz1">In Between</td>
<td class="tg-alz1">Scotty McCreery</td>
<td class="tg-i6s1">69</td>
</tr>
<tr>
<td class="tg-baqh">64</td>
<td class="tg-0lax">Otherside Of America</td>
<td class="tg-0lax">Meek Mill</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">65</td>
<td class="tg-alz1">God Whispered Your Name</td>
<td class="tg-alz1">Keith Urban</td>
<td class="tg-i6s1">71</td>
</tr>
<tr>
<td class="tg-baqh">66</td>
<td class="tg-0lax">Yo Perreo Sola</td>
<td class="tg-0lax">Bad Bunny</td>
<td class="tg-baqh">67</td>
</tr>
<tr>
<td class="tg-i6s1">67</td>
<td class="tg-alz1">Ride It.</td>
<td class="tg-alz1">Regard</td>
<td class="tg-i6s1">65</td>
</tr>
<tr>
<td class="tg-baqh">68</td>
<td class="tg-0lax">X</td>
<td class="tg-0lax">Jonas Brothers Featuring Karol G</td>
<td class="tg-baqh">72</td>
</tr>
<tr>
<td class="tg-i6s1">69</td>
<td class="tg-alz1">Daisies</td>
<td class="tg-alz1">Katy Perry</td>
<td class="tg-i6s1">74</td>
</tr>
<tr>
<td class="tg-baqh">70</td>
<td class="tg-0lax">Level Of Concern</td>
<td class="tg-0lax">twenty one pilots</td>
<td class="tg-baqh">64</td>
</tr>
<tr>
<td class="tg-i6s1">71</td>
<td class="tg-alz1">Don't Rush</td>
<td class="tg-alz1">Young T & Bugsey Featuring Headie One</td>
<td class="tg-i6s1">79</td>
</tr>
<tr>
<td class="tg-baqh">72</td>
<td class="tg-0lax">Need It</td>
<td class="tg-0lax">Migos Featuring YoungBoy Never Broke Again</td>
<td class="tg-baqh">76</td>
</tr>
<tr>
<td class="tg-i6s1">73</td>
<td class="tg-alz1">Dollaz On My Head</td>
<td class="tg-alz1">Gunna Featuring Young Thug</td>
<td class="tg-i6s1">73</td>
</tr>
<tr>
<td class="tg-baqh">74</td>
<td class="tg-0lax">Drinking Alone</td>
<td class="tg-0lax">Carrie Underwood</td>
<td class="tg-baqh">77</td>
</tr>
<tr>
<td class="tg-i6s1">75</td>
<td class="tg-alz1">Righteous</td>
<td class="tg-alz1">Juice WRLD</td>
<td class="tg-i6s1">75</td>
</tr>
<tr>
<td class="tg-baqh">76</td>
<td class="tg-0lax">Got What I Got</td>
<td class="tg-0lax">Jason Aldean</td>
<td class="tg-baqh">78</td>
</tr>
<tr>
<td class="tg-i6s1">77</td>
<td class="tg-alz1">Tell Me U Luv Me</td>
<td class="tg-alz1">Juice WRLD & Trippie Redd</td>
<td class="tg-i6s1">41</td>
</tr>
<tr>
<td class="tg-baqh">78</td>
<td class="tg-0lax">One Big Country Song</td>
<td class="tg-0lax">LOCASH</td>
<td class="tg-baqh">82</td>
</tr>
<tr>
<td class="tg-i6s1">79</td>
<td class="tg-alz1">Like That</td>
<td class="tg-alz1">Doja Cat Featuring Gucci Mane</td>
<td class="tg-i6s1">92</td>
</tr>
<tr>
<td class="tg-baqh">80</td>
<td class="tg-0lax">Deep End Freestyle</td>
<td class="tg-0lax">Sleepy Hallow</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">81</td>
<td class="tg-alz1">Grace</td>
<td class="tg-alz1">Lil Baby & 42 Dugg</td>
<td class="tg-i6s1">85</td>
</tr>
<tr>
<td class="tg-baqh">82</td>
<td class="tg-0lax">Sour Candy</td>
<td class="tg-0lax">Lady Gaga & BLACKPINK</td>
<td class="tg-baqh">33</td>
</tr>
<tr>
<td class="tg-i6s1">83</td>
<td class="tg-alz1">Why We Drink</td>
<td class="tg-alz1">Justin Moore</td>
<td class="tg-i6s1">87</td>
</tr>
<tr>
<td class="tg-baqh">84</td>
<td class="tg-0lax">Girl Of My Dreams</td>
<td class="tg-0lax">Rod Wave</td>
<td class="tg-baqh">91</td>
</tr>
<tr>
<td class="tg-i6s1">85</td>
<td class="tg-alz1">Cool Again</td>
<td class="tg-alz1">Kane Brown</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">86</td>
<td class="tg-0lax">Turks</td>
<td class="tg-0lax">"NAV Gunna & Travis Scott</td>
<td class="tg-baqh">89</td>
</tr>
<tr>
<td class="tg-i6s1">87</td>
<td class="tg-alz1">One Beer</td>
<td class="tg-alz1">HARDY Featuring Lauren Alaina & Devin Dawson</td>
<td class="tg-i6s1">97</td>
</tr>
<tr>
<td class="tg-baqh">88</td>
<td class="tg-0lax">July</td>
<td class="tg-0lax">Noah Cyrus & Leon Bridges</td>
<td class="tg-baqh">98</td>
</tr>
<tr>
<td class="tg-i6s1">89</td>
<td class="tg-alz1">Cooler Than A Bitch</td>
<td class="tg-alz1">Gunna Featuring Roddy Ricch</td>
<td class="tg-i6s1">81</td>
</tr>
<tr>
<td class="tg-baqh">90</td>
<td class="tg-0lax">Mamacita</td>
<td class="tg-0lax">Black Eyed Peas, Ozuna + J.Rey Soul</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">91</td>
<td class="tg-alz1">All In</td>
<td class="tg-alz1">Lil Baby</td>
<td class="tg-i6s1">99</td>
</tr>
<tr>
<td class="tg-baqh">92</td>
<td class="tg-0lax">That Way</td>
<td class="tg-0lax">Lil Uzi Vert</td>
<td class="tg-baqh">94</td>
</tr>
<tr>
<td class="tg-i6s1">93</td>
<td class="tg-alz1">One Night Standards</td>
<td class="tg-alz1">Ashley McBryde</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">94</td>
<td class="tg-0lax">One Of Them Girls</td>
<td class="tg-0lax">Lee Brice</td>
<td class="tg-baqh">90</td>
</tr>
<tr>
<td class="tg-i6s1">95</td>
<td class="tg-alz1">Hard Days</td>
<td class="tg-alz1">Brantley Gilbert</td>
<td class="tg-i6s1">-</td>
</tr>
<tr>
<td class="tg-baqh">96</td>
<td class="tg-0lax">Catch</td>
<td class="tg-0lax">Brett Young</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">97</td>
<td class="tg-alz1">ily</td>
<td class="tg-alz1">surf mesa Featuring Emilee</td>
<td class="tg-i6s1">96</td>
</tr>
<tr>
<td class="tg-baqh">98</td>
<td class="tg-0lax">21</td>
<td class="tg-0lax">Polo G</td>
<td class="tg-baqh">-</td>
</tr>
<tr>
<td class="tg-i6s1">99</td>
<td class="tg-alz1">Trillionaire</td>
<td class="tg-alz1">Future Featuring YoungBoy Never Broke Again</td>
<td class="tg-i6s1">95</td>
</tr>
<tr>
<td class="tg-baqh">100</td>
<td class="tg-0lax">Worldwide Beautiful</td>
<td class="tg-0lax">Kane Brown</td>
<td class="tg-baqh">-</td>
</tr>
</tbody>
</table>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-85217249286527887432020-06-14T20:48:00.001+02:002020-06-14T20:48:30.475+02:00The Kinks - Sunny Afternoon (1966)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC5pm3oQ8TrgSrpzuao3WxsCkuAX1EoH50jrpcMPZt-uEZBFavqdeSrRmUjhmSq6QapyBjispUdZ6mAGpeHlW4LxnXCEoS_B_2o6gD2Nj48r_NZnPjKAYV8IKwpSGJ_291I6DtroKxO1O-/s1600/The+Kinks+-+Sunny+Afternoon.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="The Kinks - Sunny Afternoon (1966)" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC5pm3oQ8TrgSrpzuao3WxsCkuAX1EoH50jrpcMPZt-uEZBFavqdeSrRmUjhmSq6QapyBjispUdZ6mAGpeHlW4LxnXCEoS_B_2o6gD2Nj48r_NZnPjKAYV8IKwpSGJ_291I6DtroKxO1O-/s320/The+Kinks+-+Sunny+Afternoon.jpg" title="The Kinks - Sunny Afternoon (1966)" width="300" /></a></div><div style="text-align: justify;">"<b>Sunny Afternoon</b>" is a song by <b>the Kinks</b>, written by chief songwriter Ray Davies. The track later featured on the <b><i>Face to Face</i></b> album as well as being the title track for their 1967 compilation album.</div><br />
<div style="text-align: justify;">Released as a single on 3 June 1966, it went to No. 1 on the UK Singles Chart on 7 July 1966, remaining there for two weeks. The track also went to No. 1 in Ireland on 14 July 1966. In America, it peaked at No. 14 on the Billboard Hot 100 pop singles chart early autumn 1966.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1aV8I6FoIWvCbAz3eo0Dyw4wP1-XfHFHC",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "The Kinks",
title: "Sunny Afternoon",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-59191602162813655062020-06-14T20:10:00.000+02:002020-06-14T20:10:15.302+02:00The Zombies - Tell Her No (1965)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaM1pni04YvWarBufX4J5y4dJlK_i12MBrpHfOvLkB-N8E8BF_GQcHjz3NNxlMOrO1T0QMjEJBvVZEk9kL_qUGZE7f4MVKS61Qs9c14Nk_KqX6Zip5mHIMeIx6ZDYTOrBxYeqfrcDDT_tu/s1600/Time+of+the+Season_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="The Zombies - Tell Her No (1965) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaM1pni04YvWarBufX4J5y4dJlK_i12MBrpHfOvLkB-N8E8BF_GQcHjz3NNxlMOrO1T0QMjEJBvVZEk9kL_qUGZE7f4MVKS61Qs9c14Nk_KqX6Zip5mHIMeIx6ZDYTOrBxYeqfrcDDT_tu/s320/Time+of+the+Season_500W_500H.jpg" title="The Zombies - Tell Her No (1965) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>Tell Her No</b>" is a hit single written by Rod Argent and included by English rock band <b>The Zombies</b> on their eponymous debut album <i><b>The Zombies</b></i> in 1965. It peaked at No. 6 on the Billboard Hot 100 chart in the United States in March 1965 and was one of three big American hits by The Zombies (the others being "<a href="https://wlcyradio.blogspot.com/2019/05/shes-not-there-by-zombies-1964.html">She's Not There</a>", in 1964, and "<a href="https://wlcyradio.blogspot.com/2017/12/the-zombies-time-of-season-1968.html">Time of the Season</a>", in 1969). </div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1T2agEWFe5-jsPwzY3QoxDTPPXcJFb6b-",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "The Zombies",
title: "Tell Her No",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-67352659652827524532020-06-14T18:41:00.001+02:002020-06-14T18:41:07.434+02:00The Doors - People Are Strange (1967)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErdfCJF5lHhou-ryQYwrleUm4vLhETVdcRNARzWLm6S7jXewmIXXugoAijQofx258E7xV_Ik1fkgTwLHY0u9PiA49MbG7krh3OIWkNtM4PBWq0l7yWkpu7gDA-YbKcRm0MmIBCIw5FiR2/s1600/The+Singles_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="The Doors - People Are Strange (1967) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiErdfCJF5lHhou-ryQYwrleUm4vLhETVdcRNARzWLm6S7jXewmIXXugoAijQofx258E7xV_Ik1fkgTwLHY0u9PiA49MbG7krh3OIWkNtM4PBWq0l7yWkpu7gDA-YbKcRm0MmIBCIw5FiR2/s320/The+Singles_500W_500H.jpg" title="The Doors - People Are Strange (1967) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>People Are Strange</b>"is a song by the American rock band <b>the Doors</b>. It appears on the band's second studio album, Strange Days, released in September 1967. It was also issued the same month as a single, which peaked at number 12 on the Billboard Hot 100 chart and in the top ten on the Cash Box charts. The song was written by Jim Morrison and Robby Krieger, although credit was given to each of the Doors.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1cc2URhhGf1riabpz5KQ_VPaWgqdKGa4-",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "The Doors",
title: "People Are Strange",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-50284898528313885902020-06-14T12:45:00.003+02:002020-06-14T12:45:29.668+02:00Pink Floyd - Comfortably Numb (1979)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjh-tfVTvQ8BjUkclmDpPSlnek5eUmHWno3rZVbcxMFxDWt7ZsG6lqf5YgAEo4L6vxW_hGC2VpyU6-gCcm8T3qTgxDoVE4drUWhMdpf32AtKvA4NGshlibI-mz61PPbEKyZ48x7jJR78Hf/s1600/The+Wall_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Pink Floyd - Comfortably Numb (1979) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjh-tfVTvQ8BjUkclmDpPSlnek5eUmHWno3rZVbcxMFxDWt7ZsG6lqf5YgAEo4L6vxW_hGC2VpyU6-gCcm8T3qTgxDoVE4drUWhMdpf32AtKvA4NGshlibI-mz61PPbEKyZ48x7jJR78Hf/s320/The+Wall_500W_500H.jpg" title="Pink Floyd - Comfortably Numb (1979) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>Comfortably Numb</b>" is a song by the English rock band <b>Pink Floyd</b>, released on their eleventh album, <b><i>The Wall</i></b> (1979). It was released as a single in 1980 with "Hey You" as the B-side. The chorus progression and guitar solos were written by guitarist David Gilmour, while the lyrics and verse progression were written by bassist Roger Waters.</div><br />
<div style="text-align: justify;">"Comfortably Numb" is one of Pink Floyd's most famous songs, renowned for its two guitar solos. In 2004, it was ranked number 314 on Rolling Stone magazine's list of the 500 Greatest Songs of All Time.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1RFj3pVDeC1YEoHyjXNFKGDw1O5jTiGJC",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSZHh-MOyNOeTkszQEMMKEBNifCiXL6c6v7Kl7W2dxQ7Fm5MhGXNQ9lYeWW_auC1pdYcMuDNAsmC9_94WkuIwm-RICZee0n5SKoHTUei6JrNnWZECW3lZCIqudxiwCBIuTSsNVaREddJ7Q/s1600/70s-radio-hits.jpeg",
artist: "Pink Floyd",
title: "Comfortably Numb",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-79757158699948046052020-06-14T11:53:00.003+02:002020-06-14T11:53:37.134+02:00Jefferson Airplane - White Rabbit (1967)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikke1obxxdxl6oreNQ8LT1PJshyphenhyphen-ww7zqQMVx4vhlfTPIopu1iUq3Vh5AzUCv_SgsU-PQFNieJ-04omSFUfdPyX-s4DIb6cghF5pG0VRJ22ISN_a6hs975UdCjvBmymRpVIoCj46uJj7pr/s1600/Surrealistic+Pillow_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Jefferson Airplane - White Rabbit (1967) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikke1obxxdxl6oreNQ8LT1PJshyphenhyphen-ww7zqQMVx4vhlfTPIopu1iUq3Vh5AzUCv_SgsU-PQFNieJ-04omSFUfdPyX-s4DIb6cghF5pG0VRJ22ISN_a6hs975UdCjvBmymRpVIoCj46uJj7pr/s320/Surrealistic+Pillow_500W_500H.jpg" title="Jefferson Airplane - White Rabbit (1967) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>White Rabbit</b>" is a song written by Grace Slick and recorded by the American rock band <b>Jefferson Airplane</b> for their 1967 album <b><i>Surrealistic Pillow</i></b>. It was released as a single and became the band's second top-10 success, peaking at number eight on the Billboard Hot 100. The song was ranked number 478 on Rolling Stone's list of the 500 Greatest Songs of All Time, Number 116 on Rate Your Music's Top Singles of All Time, and appears on The Rock and Roll Hall of Fame's 500 Songs that Shaped Rock and Roll.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1MEFkgOxFO9PDkCgXEEZdx9LqY2sEexEL",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Jefferson Airplane",
title: "White Rabbit",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-83443370943133458622020-06-14T10:35:00.001+02:002020-06-14T10:35:36.861+02:00Cream - White Room (1968)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9cw6hQ9CPCG13OpVrbN-G9DT0s8KUAF6c1aE2_cy21zaRocWUxdIruGHICreQ6cj8l5EOOdDhD1M6siJYcmABgW_npnxAj-WjN35YSGkQDmV1h6WVGsEOqVaVYW8wAco4NSVzN2SFwaxW/s1600/Cream-Gold_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cream - White Room (1968) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9cw6hQ9CPCG13OpVrbN-G9DT0s8KUAF6c1aE2_cy21zaRocWUxdIruGHICreQ6cj8l5EOOdDhD1M6siJYcmABgW_npnxAj-WjN35YSGkQDmV1h6WVGsEOqVaVYW8wAco4NSVzN2SFwaxW/s320/Cream-Gold_500W_500H.jpg" title="Cream - White Room (1968) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>White Room</b>" is a song by British rock band <b>Cream</b>, composed by bassist Jack Bruce with lyrics by poet Pete Brown. They recorded it for the studio half of the 1968 double album Wheels of Fire. In September, a shorter US single edit (without the third verse) was released for AM radio stations, although album-oriented FM radio stations played the full album version. The subsequent UK single release in January 1969 used the full-length album version of the track. It peaked #2 on U.S. Billboard Hot 100 and #2 on U.S. Cashbox Top Singles</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div> acts as a separator--></div><div translate="no" class="notranslate"> <div id="player"> <div class="cover"> <div class="lrc"> <div class="line"></div> </div> </div> <div class="progressContainer"> <div class="buffer"></div> <div class="progress"></div> </div> <div class="detail"> <div class="title"></div> </div> <div class="controls"> <i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input type="range" class="volume" min="0" max="100" step="1" value="100" /><br />
<br />
</div></div><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script><br /><br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1yY51UGMiNQF9-_bfaIEtlAsFqycMyL8s",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRn9BT04WtwTiLAxDChZuxcSnaoZKWEHKMR29amXmvR6zFMbv1iORwzGHd8fRHbTcboInyi1VNBFfK9T0jMv_KdWMP74vhMdKMuc7m1QgU04H36EontQxYJW0S5JhflEXYbPt4CnyL0Bo/s1600/The_Fabulous_60%2527s_Album_500W_500H.jpg",
artist: "Cream",
title: "White Room",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0tag:blogger.com,1999:blog-3602586200394761005.post-14886607086177473642020-06-14T10:03:00.000+02:002020-06-14T10:05:32.156+02:00The Doors - Roadhouse Blues (1970)<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmFQXtXGoFZaeUee1Srge_tlJCpHoAJJhLU6B9tPLmYCjVA7S-L9lcPyt7JPXsn84k1vrfc47sh8EwP85VRRm7nwg-i4N4bAUIIIMgO0ZCPnKHWL4DXrbhwrfMRA7QWlcSZDwa0ZtEMGOI/s1600/Morrison+Hotel_500W_500H.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="The Doors - Roadhouse Blues (1970) WLCY Radio Hits" border="0" data-original-height="500" data-original-width="500" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmFQXtXGoFZaeUee1Srge_tlJCpHoAJJhLU6B9tPLmYCjVA7S-L9lcPyt7JPXsn84k1vrfc47sh8EwP85VRRm7nwg-i4N4bAUIIIMgO0ZCPnKHWL4DXrbhwrfMRA7QWlcSZDwa0ZtEMGOI/s320/Morrison+Hotel_500W_500H.jpg" title="The Doors - Roadhouse Blues (1970) WLCY Radio Hits" width="300" /></a></div><div style="text-align: justify;">"<b>Roadhouse Blues</b>" is a song by the American rock band <b>the Doors</b>, which appears on the 1970 album <b><i>Morrison Hotel</i></b>. It was released as the B-side of "You Make Me Real", which peaked at number 50 on the U.S. Billboard Hot 100. The song became a concert staple for the group and it has been covered by numerous artists.</div><style>
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);*{box-sizng:border-box}#player{width:300px;height:450px;box-shadow:0 0 5px #bbb}#player .cover{height:300px;width:300px;background-size:cover;box-sizing:border-box}#player .cover .lrc{height:100%;width:100%;cursor:pointer;display:flex;justify-content:center;align-items:flex-end}#player .cover .line{cursor:default;display:flex;margin-bottom:8px;width:90%;color:#fff;background-color:rgba(0,0,0,.6);border-radius:3px;padding:8px 10px;font-size:13px;line-height:16px;justify-content:center;flex-direction:column;text-align:center}#player .progressContainer{cursor:pointer;position:relative}#player .buffer{height:7px;width:0%;background-color:grey}#player .progress{height:7px;position:absolute;top:0;width:0%;background-color:red}#player .detail{padding:12px 20px}#player .detail .title{text-align:center;font-size:15px}#player .controls{display:flex;width:100%;margin-top:3px;justify-content:center;align-items:center}#player .controls .icon{font-size:36px;cursor:pointer}#player .controls .icon:hover{color:#f33336}#player .controls .icon.pause,#player .controls .icon.play{color:#f44336;font-size:55px;margin-left:5px;margin-right:5px}#player .controls .icon.pause,#player .controls .icon.repeat-one,#player .controls .icon.shuffle{display:none}#player input.volume{display:none;width:50px}
</style><br />
<br />
<div style="clear: both;"><!--This <div><br />
<br />
<br />
<br />
acts as a separator--></div><div class="notranslate" translate="no"><div id="player"><div class="cover"><div class="lrc"><div class="line"></div></div></div><div class="progressContainer"><div class="buffer"></div><div class="progress"></div></div><div class="detail"><div class="title"></div></div><div class="controls"><i class="icon repeat material-icons">repeat</i><br />
<i class="icon repeat-one material-icons">repeat_one</i><br />
<i class="icon shuffle material-icons">shuffle</i><br />
<i class="icon prev material-icons">skip_previous</i><br />
<i class="icon play material-icons">play_circle_filled</i><br />
<i class="icon pause material-icons">pause_circle_filled</i><br />
<i class="icon next material-icons">skip_next</i><br />
<i class="icon volume material-icons">volume_up</i><br />
<input class="volume" max="100" min="0" step="1" type="range" value="100" /><br />
<br />
</div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script><br />
<br />
<script id="rendered-js">
function Song() {
this.audio = document.createElement('audio');
this.setTrack = function (src) {
this.audio.src = src;;
}
this.play = function () {
this.audio.play();
}
this.pause = function () {
this.audio.pause()
};
this.toggleMute = function () {
this.audio.muted = !this.audio.muted;
};
this.jumpTo = function (ratio) {
var seekable = this.audio.seekable;
var anchor = this.audio.duration * ratio;
if (anchor > seekable.start(0) && anchor < seekable.end(0)) {
this.audio.currentTime = anchor;
}
};
this.setVolume = function (volume) {
volume = parseFloat(volume);
if (volume >= 0 && volume <= 1) {
this.audio.volume = volume;
}
}
}
function Player(songs) {
this.timer = new Timer();
this.song = new Song();
this.songArray = songs;
this.length = songs.length;
this.currentPlaying = 0;
this.mode = "repeat";
this.setUpEventListener();
this.setSong(songs[0]);
}
Player.prototype.setUpEventListener = function () {
var that = this;
$("#player .controls.icon, #player .cover").on("mousedown touchstart mousemove touchmove", function (e) {
e.preventDefault();
});
this.song.audio.addEventListener("timeupdate", function () {
var progress = this.currentTime / this.duration * 100;
$("#player .progress").css("width", `${progress}%`);
});
this.song.audio.addEventListener("ended", () => {
this.playNext();
})
this.song.audio.addEventListener("playing", () => {
$("#player .icon.play").hide();
$("#player .icon.pause").show();
})
this.song.audio.addEventListener("pause", () => {
$("#player .icon.play").show();
$("#player .icon.pause").hide();
})
$(this.song.audio).on("canplaythrough", () => {
this.song.canPlayThrough = true;
})
$(this.song.audio).on("durationchange loadedmetadata loadeddata progress canplay canplaythrough", function () {
if (this.readyState == 4) {
var loaded = this.buffered.end(0)
$("#player .buffer").css("width", `${loaded / this.duration * 100}%`)
}
})
$("#player .icon.repeat").click(function () {
that.mode = "repeat-one";
$(this).hide();
$("#player .icon.repeat-one").show();
})
$("#player .icon.repeat-one").click(function () {
that.mode = "shuffle";
$(this).hide();
$("#player .icon.shuffle").show();
})
$("#player .icon.shuffle").click(function () {
that.mode = "repeat";
$(this).hide();
$("#player .icon.repeat").show();
})
$("#player .icon.prev").on("click", () => {
this.playPrev();
});
$("#player .icon.next").on("click", () => {
this.playNext();
});
$("#player .icon.play").on("click", () => {
this.song.play();
this.timer.start(this.syncLrc.bind(this));
});
$("#player .icon.pause").on("click", () => {
this.timer.stop();
this.song.pause();
});
$("#player .icon.volume").on("click", function () {
$(this).hide();
$("#player input.volume").show();
})
$("#player input.volume").on("mouseout", function () {
$(this).hide();
$("#player .icon.volume").show();
}).on("input", function () {
that.song.setVolume(parseInt(this.value) / 100);
})
$("#player .cover").on("click", function () {
$("#player .lrc").toggle();
});
$("#player .line").on("click", function (e) {
e.stopPropagation()
});
(function (that) {
var progress_mousedown = false;
$("#player .progressContainer").mousedown(function () {
progress_mousedown = true;
}).on("mousemove mouseup", function (e) {
if (progress_mousedown && that.song.canPlayThrough) {
var progress = e.offsetX / $(this).width();
that.song.jumpTo(progress);
}
});
$("body").mouseup(function () {
progress_mousedown = false;
});
})(this);
}
Player.prototype.play = function (index) {
this.currentPlaying = ((index >> 0) + this.length) % this.length;
this.song.pause();
this.timer.stop();
this.setSong(this.songArray[this.currentPlaying], (hasLrc) => {
this.song.play();
if (hasLrc) {
this.timer.start(this.syncLrc.bind(this));
}
});
}
function whichToPlay(current, mode, direction, total) {
console.log(mode)
var index;
if (mode == "repeat") {
index = direction == "next" ? current + 1 : current - 1
} else if (mode == "repeat-one") {
index = current;
} else {
index = Math.round(Math.random() * total);
}
return index;
}
Player.prototype.playNext = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "next", this.length));
}
Player.prototype.playPrev = function () {
this.play(whichToPlay(this.currentPlaying, this.mode, "previous", this.length));
}
Player.prototype.setSong = function (songData, next) {
this.song.lrc = null;
this.song.setTrack(songData.track);
this.song.canPlayThrough = false;
// update cover
$("#player .cover").css("background-image", `url(${songData.cover})`);
// update detail
$("#player .detail .title").text(`${songData.title} - ${songData.artist}`);
// set default text for lyrics
$("#player .lrc .line").text(songData.title);
// get lyrics
$.get(songData.lrc, (data) => {
this.song.lrc = Lrc(data);
}).fail(() => {})
.always(() => {
if (typeof next == 'function') {
next(!!this.song.lrc);
}
})
}
Player.prototype.syncLrc = function () {
var lines = this.song.lrc;
var anchor = Math.round(this.song.audio.currentTime * 10) * 100;
while (true) {
if (anchor < 0) {
break;
} else if (lines[anchor]) {
$("#player .lrc .line").text(lines[anchor].text);
break;
} else {
anchor -= 100;
}
}
}
function Timer() {
this.interval;
this.start = function (cb) {
this.interval = setInterval(cb, 100);
};
this.stop = function () {
clearInterval(this.interval);
}
}
function Lrc(text) {
var lines = text.split('\n');
var result = {};
lines.forEach(function (line) {
var timeAnchors = line.match(/\d+:\d+\.\d+/g)
if (!timeAnchors) {
return
}
var _t = line.split("]");
var text = _t[_t.length - 1];
timeAnchors.forEach(function (anchor) {
var _r = anchor.split(":").map(parseFloat)
var time = (_r[0] * 60 + (Math.round(_r[1] * 10)) / 10) * 1000;
result[time] = {
text
}
})
})
return result;
}
var songs = [
{
track: "https://docs.google.com/uc?export=download&id=1cL9KjALlvM1r-TL_jaoNCYecA_VUsYcb",
cover: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSZHh-MOyNOeTkszQEMMKEBNifCiXL6c6v7Kl7W2dxQ7Fm5MhGXNQ9lYeWW_auC1pdYcMuDNAsmC9_94WkuIwm-RICZee0n5SKoHTUei6JrNnWZECW3lZCIqudxiwCBIuTSsNVaREddJ7Q/s1600/70s-radio-hits.jpeg",
artist: "The Doors",
title: "Roadhouse Blues",
lrc: ""
}
]
var player = new Player(songs);
</script>
</div>Fidel Benitezhttp://www.blogger.com/profile/04632969086071582662noreply@blogger.com0