Как я могу воспроизводить Audio в HTML, взяв строку Base64 из файла GitHub? [закрыто] ⇐ Html

[Anonymous]

Я строю простой автономный музыкальный проигрыватель с помощью HTML и JavaScript. Поэтому я загрузил строку Base64 (из файла .mp3) в файл .txt на GitHub. Теперь я хочу извлечь эту строку Base64 с использованием JavaScript, преобразовать ее в Blob и воспроизвести музыку, используя тег.

Код: Выделить всё

document.getElementById("loadBtn").addEventListener("click", async () => {
const status = document.getElementById("status");
status.textContent = "🔄 Đang tải nhạc...";
status.classList.remove("error");

try {
const response = await fetch(
"https://raw.githubusercontent.com/HuynhMinhHoang/music/refs/heads/main/note%20thai%20binh%20mo%20hoi%20roi.txt"
);
const base64 = await response.text();

const binary = atob(base64.trim());
const bytes = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
bytes[i] = binary.charCodeAt(i);
}

const blob = new Blob([bytes], {
type: "audio/mp3"
});
const url = URL.createObjectURL(blob);

const audio = document.getElementById("audioPlayer");
audio.src = url;
await audio.play();

status.textContent = "✅ Đã tải xong và đang phát nhạc!";
} catch (err) {
status.textContent = "❌ Không thể tải hoặc phát nhạc.";
status.classList.add("error");
console.error(err);
}
});< /code>
body {
font-family: sans-serif;
background: #1a1a1a;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}

.player {
background: #333;
padding: 20px;
border-radius: 10px;
text-align: center;
}

button {
padding: 10px 20px;
font-size: 18px;
margin-top: 10px;
cursor: pointer;
}

#status {
margin-top: 15px;
font-size: 16px;
color: #00ffcc;
}

.error {
color: #ff4444 !important;
}< /code>
🎵 Nhạc Offline đầy đủ

Tải và phát nhạc

Подробнее здесь: https://stackoverflow.com/questions/796 ... ithub-file