m.js

const mySongs = [
    "weathergirl ft. Eleanor Forte 0.mp3",
    "Human ft. SF-A2 Miki.mp3",
    "Kikuo - Love me, Love me, Love me 0.mp3",
    "熱異常  いよわ feat.足立レイHeat abnormal  Iyowa feat.Adachi Rei.mp3",
    "inabakumori - Lagtrain (Vo. Kaai Yuki) _ 稲葉曇『ラグトレイン』Vo. 歌愛ユキ 0.mp3",
    "Kikuo - 君はできない子.mp3",
    "Kikuo - ごめんね ごめんね.mp3",
    "きゅうくらりん : いよわ feat.可不（Kyu-kurarin : Iyowa feat.Kafu）.mp3",
    "Ego Renegade Boy ft. Kagamine Len.mp3",
    "Queen of Venus ft. Adachi Rei.mp3",
];


const container = document.getElementById('audio-list');

if (container) {

    const count = document.createElement('p');
    count.style.fontFamily = "'Press Start 2P', cursive";
    count.style.fontSize = "10px";
    count.style.color = "#00FF73";
    count.style.textAlign = "center";
    count.innerText = `TOTAL_TRACKS: ${mySongs.length}`;
    container.appendChild(count);


    mySongs.forEach(song => {
        const div = document.createElement('div');
        div.style.borderTop = "1px solid #004400";
        
        const path = "/media/" + encodeURIComponent(song);

        div.innerHTML = `
            <p style="font-family: 'Press Start 2P', cursive; font-size: 8px; color: #00FF73; margin: 15px 0 8px 0; line-height: 1.4;">
                ${song}
            </p>
            <audio controls style="filter: invert(100%) hue-rotate(90deg) brightness(1.2); width: 100%;">
                <source src="${path}" type="audio/mpeg">
            </audio>
        `;
        container.appendChild(div);
    });
}


const alertBtn = document.getElementById('alert-btn');

if (alertBtn) {
    alertBtn.addEventListener('click', () => {
        alert('Button been pressed :3');
    });
}