Loading...
Let It Be by The Beatles: Guitar Chords and Lyrics - body {
margin: 0;
font-family: sans-serif;
}
.top-button-row,
.bottom-button-container {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
padding: 15px;
}
.styled-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 4px;
text-align: center;
transition: background-color 0.2s ease, border 0.2s ease;
user-select: none;
}
.styled-button:hover {
background-color: #444;
}
.editable-button {
display: inline-flex;
align-items: center;
justify-content: center;
background-color: #333;
color: #fff;
border: 2px solid #fff;
border-radius: 4px;
padding: 10px 20px;
font-size: 16px;
text-align: center;
min-width: 80px;
user-select: none;
outline: none;
}
.editable-button:focus {
background-color: #444;
}
.lyrics-container {
column-gap: 40px;
max-width: 100%;
padding: 20px;
}
.lyrics {
white-space: pre-wrap;
font-family: monospace;
column-count: 1;
}
.two-columns .lyrics {
column-count: 2;
}
@media (max-width: 768px) {
.two-columns .lyrics {
column-count: 1;
}
}
#printPreviewContainer {
display: none;
}
#printPreview {
white-space: pre-wrap;
font-family: monospace;
column-count: 2;
column-gap: 40px;
line-height: 1.4;
}
@media print {
body * {
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
}
#printPreviewContainer,
#printPreviewContainer * {
visibility: visible !important;
height: auto !important;
overflow: visible !important;
}
#printPreviewContainer {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 20px;
background-color: white;
box-sizing: border-box;
page-break-inside: avoid;
}
#printPreview {
text-align: left;
}
}
Loading...
Columns
Loading...
The Beatles - Let it Be
Capo: 1
[Intro]
C G Am F C G F C
[Verse 1]
C G Am F
When I find myself in times of trouble
C G F C
Mother Mary comes to me
C G Am F
Speaking words of wisdom, let it be
C G F C
And in my hour of darkness
C G Am F
She is standing right in front of me
C G F C
Speaking words of wisdom, let it be
[Chorus]
Am G F C
Let it be, let it be, let it be, let it be
F C G F C
Whisper words of wisdom, let it be
[Verse 2]
C G Am F
And when the broken hearted people
C G F C
Living in the world agree
C G Am F
There will be an answer, let it be
C G F C
For though they may be parted there is
C G Am F
Still a chance that they will see
C G F C
There will be an answer, let it be
[Chorus]
Am G F C
Let it be, let it be, let it be, let it be
F C G F C
Whisper words of wisdom, let it be
Am G F C
Let it be, let it be, let it be, let it be
F C G F C
Whisper words of wisdom, let it be
[Bridge]
Am G
Let it be, let it be, let it be, let it be
F C G F C
Whisper words of wisdom, let it be
[Solo]
C G Am F C G F C
[Verse 3]
C G Am F
And when the night is cloudy
C G F C
There is still a light that shines on me
C G Am F
Shine until tomorrow, let it be
C G F C
I wake up to the sound of music
C G Am F
Mother Mary comes to me
C G F C
Speaking words of wisdom, let it be
[Chorus]
Am G F C
Let it be, let it be, let it be, let it be
F C G F C
Whisper words of wisdom, let it be
Am G F C
Let it be, let it be, let it be, let it be
F C G F C
Whisper words of wisdom, let it be
[Outro]
Am G
Let it be, let it be, let it be, let it be
F C G F C
Whisper words of wisdom, let it be
Random
Print
11pt
let player;
let activeTrack = null;
const youtubeButton = document.getElementById('youtubeToggleButton');
const karaokeButton = document.getElementById('karaokeToggleButton');
const tracks = {
audio: 'QDYfEBY9NM4',
karaoke: 'OhRUYf_yn_s'
};
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-player', {
height: '0',
width: '0',
videoId: tracks.audio,
playerVars: { autoplay: 0, controls: 0, playsinline: 1 },
events: {
'onReady': () => {
youtubeButton.textContent = "Audio";
karaokeButton.textContent = "Karaoke";
}
}
});
}
function togglePlayback(trackType, buttonId) {
const isSameTrack = activeTrack === trackType;
const isPlaying = player.getPlayerState() === YT.PlayerState.PLAYING;
if (!isSameTrack) {
activeTrack = trackType;
player.loadVideoById(tracks[trackType]);
youtubeButton.textContent = "Audio";
karaokeButton.textContent = "Karaoke";
document.getElementById(buttonId).textContent = "Stop";
} else {
if (isPlaying) {
player.pauseVideo();
document.getElementById(buttonId).textContent = trackType === 'audio' ? "Audio" : "Karaoke";
} else {
player.playVideo();
document.getElementById(buttonId).textContent = "Stop";
}
}
}
youtubeButton.onclick = () => togglePlayback('audio', 'youtubeToggleButton');
karaokeButton.onclick = () => togglePlayback('karaoke', 'karaokeToggleButton');
document.getElementById('toggleButton').onclick = () => {
document.getElementById('lyricsContainer').classList.toggle('two-columns');
};
function printLyrics() {
const fontSizeText = document.getElementById('fontSizeEditor').innerText.trim();
const fontSize = fontSizeText.match(/^\d+(pt|px|em|rem)$/i) ? fontSizeText : '11pt';
const lyricsHTML = document.getElementById('lyrics').innerHTML;
const preview = document.getElementById('printPreviewContainer');
const previewContent = document.getElementById('printPreview');
previewContent.innerHTML = `${lyricsHTML}`;
previewContent.style.fontSize = fontSize;
preview.style.display = 'block';
setTimeout(() => {
window.print();
preview.style.display = 'none';
}, 100);
}
Scroll
#adjustableWidget {
position: fixed;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
background-color: #f0f0f0;
padding: 5px 8px;
border: 1px solid #ccc;
border-radius: 4px;
z-index: 99999;
font-size: 12px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
}
#adjustInput {
width: 60px;
padding: 2px;
font-size: 12px;
}
#adjustNumber {
width: 40px;
padding: 2px;
font-size: 12px;
}
#startScrollButton {
padding: 4px 8px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
}
document.addEventListener("DOMContentLoaded", () => {
let isScrolling = false;
let animationFrameId = null;
let scrollRemainder = 0;
const adjustInput = document.getElementById("adjustInput");
const adjustNumber = document.getElementById("adjustNumber");
const startScrollButton = document.getElementById("startScrollButton");
const SPEED_OFFSET = 10;
const SPEED_FACTOR = 0.1;
function getAdjustedSpeed(rawValue) {
return (parseInt(rawValue) + SPEED_OFFSET) * SPEED_FACTOR;
}
// Initialize values
adjustInput.value = 50;
adjustNumber.value = 50;
let scrollSpeed = getAdjustedSpeed(50);
// Sync input changes
function updateSpeedFromInput(value) {
adjustInput.value = value;
adjustNumber.value = value;
scrollSpeed = getAdjustedSpeed(value);
}
adjustInput.addEventListener("input", (e) => updateSpeedFromInput(e.target.value));
adjustNumber.addEventListener("input", (e) => updateSpeedFromInput(e.target.value));
startScrollButton.addEventListener("click", () => {
if (!isScrolling) {
isScrolling = true;
startScrollButton.textContent = "Stop";
scrollStep();
} else {
stopScroll();
startScrollButton.textContent = "Scroll";
}
});
function scrollStep() {
if (!isScrolling) return;
const bottomReached = (window.innerHeight + window.scrollY) >= document.body.offsetHeight;
if (bottomReached) {
stopScroll();
startScrollButton.textContent = "Scroll";
return;
}
scrollRemainder += scrollSpeed;
let pixelsToScroll = Math.floor(scrollRemainder);
scrollRemainder -= pixelsToScroll;
if (pixelsToScroll === 0 && scrollSpeed > 0) {
pixelsToScroll = 1;
}
window.scrollBy(0, pixelsToScroll);
animationFrameId = requestAnimationFrame(scrollStep);
}
function stopScroll() {
isScrolling = false;
cancelAnimationFrame(animationFrameId);
scrollRemainder = 0;
}
window.addEventListener("scroll", () => {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
stopScroll();
startScrollButton.textContent = "Scroll";
}
});
});
