Hôm nay, sự kiện “Bóng ai qua thềm” đã diễn ra với sự tham gia của nhiều nghệ sĩ tài năng. Những giai điệu trong bài hát đã làm cho không khí trở nên ấm áp và thân thiện. Đến từng nhịp nhạc, mỗi người trong đám đông đều cảm nhận được sự gần gũi, hòa mình vào không gian âm nhạc tuyệt vời này.
#bongaiquathem #sukiendannghenhac #amnhactrinhbay #camxucsauvang
Sáng tác: Văn Chung | Ca sĩ: — | Tone gốc: Am | Style: — | Tempo: 100 | Beat: 4/4
Những lúc em ngồi suốt [Dm] canh khuya bên đèn
Miệt [F] mài cùng một [G] manh áo [C] len
[G] Vắng bóng anh em chờ [C] mong anh
[E7] Cố sức em đan thật [Am] nhanh
[F] Em đan áo cho xong còn [C] hòng đông này
Vắng hình [Dm] anh em [Em] lạnh lùng [Am] thay
Xa [C] anh em nhờ manh áo [F] ấy
Khiến em quên lạnh [E7] lùng khi ngồi trước [Am] đèn.
Bóng ai qua [Am] thềm, vừa nhìn [F] thoáng lướt trên nền trời [E7] đêm
Ngừng đan em [Am] thấy gió lay mành [C] trúc bóng qua êm [E7] đềm
Cùng cơn gió [G] êm làm xua [Dm] tấm áo len trên lòng [E7] em
Lòng em xao [Am] xuyến muốn nghiêng mình [E7] tránh gió qua bên [Am] thềm
Rồi thời gian ấy [G] qua tấm [Am] áo ấy em đan chưa xong mà
Cứ mỗi khi làn [F] gió lướt qua bên [E7] mình thì lòng em
[Am] Thấy xốn xang vì gió nâng áo lên [E7] em kề bên trái [Am] tim [E7]
Mùa đông sắp [Am] đến gió lay mành [E7] trúc, bóng ai qua [Am] thềm.
Tuyết Tuyết
Am
Mai Hương (trước 75)
Cm
Khánh Ly (trước 75)
Abm
/* Use flexbox for layout */
#beat-container {
display: flex;
position: fixed; /* Fixed position to stay on screen */
bottom: 3px; /* Distance from the bottom */
left: 15%; /* Center horizontally */
align-items: center; /* Center items vertically */
font-size: 2em; /* Double the font size */
z-index: 1000; /* Ensure it’s above other content */
}
#beat-buttons {
display: flex;
justify-content: center; /* Center items horizontally */
margin-bottom: 20px;
}
.beat-button {
width: 1.05em; /* Make the button 30% smaller */
height: 0.7em; /* Make the button 30% smaller */
background-color: grey; /* Inactive button color */
margin: 0.2em;
border-radius: 10%; /* Rounded corners */
}
.beat-button.active {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Shadow for depth */
opacity: 0.5; /* Partial transparency */
transition: opacity 0.3s ease, transform 0.3s ease; /* Smooth transitions */
opacity: 1; /* Full opacity for active button */
background-color: red; /* Active button color */
transform: scale(1.2); /* Scale up when active */
}
/* Styling for the text after the button */
#tempo {
background-color: #25261430;
font-size: 24px;
color: #54ab51;
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 16px;
border-radius: 10px;
padding: 2px;
display: inline-block;
cursor: pointer;
}
.tap-tempo-button {
bottom: 2px;
left: 3px;
padding: 0.5px 20px; /* Comfortable padding */
font-size: 15px; /* Readable font size */
color: #fff; /* White text color for contrast */
background-color: #2f9daeab; /* Blue background color */
border: none; /* No border for a modern look */
border-radius: 5px; /* Rounded corners */
cursor: pointer; /* Pointer cursor on hover */
outline: none; /* No outline on focus */
transition: background-color 0.3s ease; /* Smooth background color transition on hover */
}
.tap-tempo-button:hover {
background-color: #0056b3; /* Slightly darker blue on hover */
}
.tap-tempo-button:active {
background-color: #004085; /* Even darker blue to simulate a click effect */
}
let beat=”4/4″;
let beatButtons = document.getElementById(‘beat-buttons’);
let tempoElement = document.getElementById(‘tempo’);
///////////////////////////////////TAP/////////////////////
// Add a button for tapping the tempo
let tapTempoButton = document.createElement(‘button’);
tapTempoButton.className=”tap-tempo-button”;
tapTempoButton.textContent=”Tap”;
tapTempoButton.onclick = tapTempo;
document.getElementById(‘beat-container’).appendChild(tapTempoButton);
////////////////////////////////////////////////////////
// Create the beat buttons
let beatCount = parseInt(beat.split(‘/’)[0]);
for (let i = 0; i < beatCount; i++) {
let button = document.createElement('div');
button.className = 'beat-button';
beatButtons.appendChild(button);
}
// Highlight the buttons according to the beat
let currentBeat = 0;
let interval = setInterval(function() {
// Reset all buttons
for (let button of beatButtons.children) {
button.classList.remove('active');
}
// Highlight the current beat
beatButtons.children[currentBeat].classList.add('active');
// Move to the next beat
currentBeat = (currentBeat + 1) % beatCount;
}, (60 / tempoElement.textContent) * 1000);
// Update the interval when the tempo changes
let observer = new MutationObserver(function() {
clearInterval(interval);
interval = setInterval(function() {
// Reset all buttons
for (let button of beatButtons.children) {
button.classList.remove('active');
}
// Highlight the current beat
beatButtons.children[currentBeat].classList.add('active');
// Move to the next beat
currentBeat = (currentBeat + 1) % beatCount;
}, (60 / tempoElement.textContent) * 1000);
});
// Add an event listener to the tempo element
tempoElement.addEventListener('click', function() {
// Check if the browser supports the setSelectionRange method
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(this);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}
// Set focus to the tempo element
this.focus();
});
// Add an event listener to the tempo element for the click event
tempoElement.addEventListener('click', function() {
// Select all text inside the element for easy editing
window.getSelection().selectAllChildren(this);
});
// Add an event listener for the keypress event to detect the Enter key
tempoElement.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault(); // Prevent the default Enter key behavior
this.blur(); // Remove focus from the tempo element, triggering the blur event
}
});
// Add an event listener for the blur event to set the value when editing is done
tempoElement.addEventListener('blur', function() {
// The new value is now whatever text is inside the tempo element
// You can add any additional logic here if needed
});
// Function to reset the beat to 1
function resetBeat() {
currentBeat = 0; // Reset the current beat to the first beat
lastResetTimestamp = Date.now(); // Update the last reset timestamp
// Update the visual state of the buttons
for (let button of beatButtons.children) {
button.classList.remove('active');
}
beatButtons.children[currentBeat].classList.add('active');
// Restart the interval with the updated beat
startBeatInterval();
}
// Function to start the beat interval
function startBeatInterval() {
clearInterval(interval); // Clear any existing interval
interval = setInterval(function() {
let timeSinceLastReset = Date.now() – lastResetTimestamp;
let beatDuration = (60 / tempoElement.textContent) * 1000;
// Calculate the current beat based on the time since the last reset
currentBeat = Math.floor(timeSinceLastReset / beatDuration) % beatCount;
// Reset all buttons
for (let button of beatButtons.children) {
button.classList.remove('active');
}
// Highlight the current beat
beatButtons.children[currentBeat].classList.add('active');
}, (60 / tempoElement.textContent) * 1000);
}
// Add an event listener to each beat button to reset the beat
for (let button of beatButtons.children) {
button.addEventListener('click', function() {
resetBeat(); // Call the resetBeat function when a button is clicked
});
}
// Initialize the beat interval when the script loads
//startBeatInterval();
// Start observing the target node for configured mutations
observer.observe(tempoElement, {
childList: true, // Observe direct children
subtree: true, // Observe descendants
characterData: true // Observe text changes
});
/////////////////TAP/////////////
// Add this JavaScript function inside your existing tag
let tapTimes = []; // Array to store tap timestamps
function tapTempo() {
let currentTime = Date.now();
tapTimes.push(currentTime); // Store the timestamp of the current tap
// Calculate the tempo only after four or more taps
if (tapTimes.length >= 4) {
// Calculate the average interval between taps
let intervals = [];
for (let i = 1; i a + b, 0) / intervals.length;
// Calculate the new tempo (in beats per minute)
let newTempo = 60000 / averageInterval;
tempoElement.textContent = Math.round(newTempo); // Update the tempo display
startBeatInterval(); // Restart the beat interval with the new tempo
tapTimes = []; // Clear the tapTimes array after calculating the tempo
}
// Reset the beat visualizer
resetBeat();
}
/////////////////END TAP//////////////