Canada’s music is iconic. From Neil and Joni to Glenn and Alanis, our country has produced some of history’s most significant singers, bandleaders and composers – and that’s no secret. So when The Globe and Mail’s arts team sat down to compile our picks for the 101 most essential Canadian albums, we knew we wanted to take a different approach. Instead of just looking at the best, most well-known albums from Canadian artists, we wanted to put together a collection of music that not only represents the impact our musicians have had on the world, but represents our country as a whole.
We also knew that we’d need some help – and a plan. We reached out to a handful of the country’s top music and culture writers and asked them to submit their top 20 albums. Then we compiled those lists, tabulating which of the albums received the most ballots. Any album with more than three ballots was an automatic in on our final list; a team of Globe arts writers and editors then got to work filling in the gaps. Over the next five months, across seemingly endless chats in multiple slack channels, email chains, video calls and meetings, and with an eye to making sure the list was representative of the country’s musical diversity, we – slowly, surely, and with more than one heated debate – finalized the list.
From Indigenous artists to jazz musicians to Francophone rock to indie-rock stars, these are the 101 albums that, we believe, tell a story about Canada.
Which of our picks would you choose as your Top 5 Canadian albums? Click “Add to my Top 5” on your picks below, then click the plus sign beside “My Top 5.” You’ll then be able to download a list of your faves to share.
We asked prominent Canadians: What is your desert island album?
Which Canadian albums did we miss? Tell us what you think
101 Canadian albums you should listen to now
My Top 5 albums
You can only pick five albums for your Top 5.
`;
scroller.appendChild(div);
if (album.longDescription && album.longDescription.trim() !== “”) {
const detailsDiv = document.createElement(“div”);
detailsDiv.className = “album-long-description”;
detailsDiv.innerHTML = album.longDescription;
scroller.appendChild(detailsDiv);
}
});
});
decadeSelect.addEventListener(“change”, applyFilters);
const debouncedApplyFilters = debounce(applyFilters, 200);
searchInput.addEventListener(“input”, debouncedApplyFilters);
document.querySelectorAll(“.top5-checkbox”).forEach(cb => {
cb.addEventListener(“change”, e => {
const idx = +e.target.dataset.index;
if (e.target.checked) {
if (topFive.length >= 5) {
e.target.checked = false;
showOverflowDialog();
return;
}
topFive.push(idx);
} else {
topFive = topFive.filter(x => x !== idx);
}
renderTopFive();
updateTopFiveCounter();
});
});
saveTop5Btn.addEventListener(“click”, () => {
html2canvas(document.getElementById(“topFiveSection”), {
useCORS: true,
scale: 2,
onclone: doc => {
const btn = doc.getElementById(“saveTop5Btn”);
if (btn) btn.style.display = “none”;
doc.querySelectorAll(‘#topFiveList .remove-btn’).forEach(el => {
el.style.display = “none”;
});
const style = doc.createElement(“style”);
style.textContent = `
#topFiveSection {
background:#fff;
padding:0.3rem 0.5rem;
border:none;
max-width: 420px;
margin:0 auto !important;
box-sizing:border-box;
}
#topFiveSection h2 {
font-family:”Pratt-Bold”,Georgia,serif;
font-size:20px;
margin-bottom:0.5rem;
}
.headline { font-size:40px; line-height:44px; }
.top5-album { margin-bottom:0.2rem; }
`;
doc.head.appendChild(style);
}
}).then(canvas => {
const link = document.createElement(“a”);
link.href = canvas.toDataURL(“image/png”);
link.download = “my_top_5_albums.png”;
link.click();
});
});
const overflowBackdrop = document.getElementById(“overflowBackdrop”);
const jumpBtn = document.getElementById(“jumpToTop5”);
const closeBtn = document.getElementById(“closeOverflow”);
overflowBackdrop.classList.add(“hidden”);
jumpBtn.addEventListener(“click”, () => {
document.getElementById(“topFiveSection”)
.scrollIntoView({ behavior: “smooth” });
overflowBackdrop.classList.add(“hidden”);
});
closeBtn.addEventListener(“click”, () => overflowBackdrop.classList.add(“hidden”));
overflowBackdrop.addEventListener(“click”, e => {
if (e.target === overflowBackdrop) overflowBackdrop.classList.add(“hidden”);
});
document.addEventListener(“keydown”, e => {
if (!overflowBackdrop.classList.contains(“hidden”) && e.key === “Escape”) {
overflowBackdrop.classList.add(“hidden”);
}
});
renderTopFive();
updateTopFiveCounter();
applyFilters();
});
function applyFilters() {
const decade = document.getElementById(“decadeSelect”).value;
const q = document.getElementById(“searchInput”).value.toLowerCase().trim();
document.querySelectorAll(“.step”).forEach(step => {
const idx = +step.dataset.index;
const matchesD = !decade || step.dataset.decade === decade;
const album = dedupedAlbums[idx];
const matchesQ = !q || album.title.toLowerCase().includes(q) || album.artist.toLowerCase().includes(q);
step.style.display = (matchesD && matchesQ) ? “” : “none”;
const next = step.nextElementSibling;
if (next && next.classList.contains(“album-long-description”)) {
next.style.display = (matchesD && matchesQ) ? “” : “none”;
}
});
document.querySelectorAll(“.decade-heading”).forEach(h => {
let vis = false, sib = h.nextElementSibling;
while (sib && !sib.classList.contains(“decade-heading”)) {
if (sib.classList.contains(“step”) && sib.style.display !== “none”) { vis = true; break; }
sib = sib.nextElementSibling;
}
h.style.display = vis ? “” : “none”;
});
}
function renderTopFive() {
const container = document.getElementById(“topFiveList”);
container.innerHTML = “”;
if (!topFive.length) {
container.innerHTML = `
You haven’t chosen any albums yet for your Top 5.
`;
document.getElementById(“saveTop5Btn”).disabled = true;
return;
}
topFive.forEach(idx => {
const a = dedupedAlbums[idx];
const div = document.createElement(“div”);
div.classList.add(“top5-album”);
div.innerHTML = `
`;
container.appendChild(div);
});
document.getElementById(“saveTop5Btn”).disabled = false;
container.querySelectorAll(“.remove-btn”).forEach(btn => {
btn.addEventListener(“click”, e => {
const idx = +e.currentTarget.dataset.index;
const cb = document.querySelector(`.top5-checkbox[data-index=”${idx}”]`);
if (cb) cb.checked = false;
topFive = topFive.filter(x => x !== idx);
renderTopFive();
updateTopFiveCounter();
});
});
container.querySelectorAll(‘.top5-title’).forEach(link => {
link.addEventListener(‘click’, function (e) {
e.preventDefault();
const stepId = this.getAttribute(‘data-step-id’);
const stepElem = document.getElementById(stepId);
if (stepElem) {
stepElem.scrollIntoView({ behavior: ‘smooth’, block: ‘center’ });
stepElem.classList.add(‘highlight-album’);
setTimeout(() => {
stepElem.classList.remove(‘highlight-album’);
}, 1500);
}
});
});
}
function updateTopFiveCounter() {
const el = document.getElementById(“topFiveCountContainer”);
animateCountChange(el, lastTop5Count, topFive.length);
lastTop5Count = topFive.length;
}
function animateCountChange(elem, oldVal, newVal) {
if (oldVal === newVal) { elem.textContent = newVal; return; }
elem.innerHTML = “”;
const o = document.createElement(“span”);
const n = document.createElement(“span”);
o.classList.add(“counter-old”); o.textContent = oldVal;
n.classList.add(“counter-new”); n.textContent = newVal;
if (newVal > oldVal) { o.classList.add(“fly-up-old”); n.classList.add(“fly-up-new”); }
else { o.classList.add(“fly-down-old”); n.classList.add(“fly-down-new”); }
elem.append(o, n);
setTimeout(() => elem.textContent = newVal, 500);
}
function showOverflowDialog() {
document.getElementById(“overflowBackdrop”)
.classList.remove(“hidden”);
}
document.addEventListener(“DOMContentLoaded”, function() {
const scrollBtns = document.querySelector(‘.scroll-buttons’);
const navbar = document.querySelector(‘.navbar’);
const navHeight = navbar ? navbar.offsetHeight : 0;
function toggleScrollButtons() {
if (window.scrollY > navHeight + 2000) {
scrollBtns.classList.remove(‘hidden’);
} else {
scrollBtns.classList.add(‘hidden’);
}
}
window.addEventListener(‘scroll’, toggleScrollButtons);
toggleScrollButtons();
document.getElementById(‘scrollToTopBtn’).onclick = function() {
const topElem = document.getElementById(‘top’);
if (topElem) topElem.scrollIntoView({ behavior: ‘smooth’ });
};
document.getElementById(‘scrollToBottomBtn’).onclick = function() {
const bottomElem = document.getElementById(‘topFiveSection’);
if (bottomElem) bottomElem.scrollIntoView({ behavior: ‘smooth’ });
};
});
