马黑黑 发表于 2023-1-21 13:47

喜庆音乐串串烧-问候所有坛友

本帖最后由 马黑黑 于 2023-1-21 13:53 编辑 <br /><br /><style>
#papa { margin: auto; width: 700px; height: 700px; background: url('https://www.huachaowang.com/forum.php?mod=attachment&aid=NDM5MTF8ODY0OGM0MGZ8MTY3NDI3OTkzOXw3MTMwfDY1NTY3&noupdate=yes') no-repeat center/cover; position: relative; }
#mlist { position: absolute; padding: 20px; }
#mlist > a { color: yellow; cursor: pointer; text-shadow: 1px 1px 2px black; text-decoration: none; }
#mlist >a:hover { color: gold; }
.sColor { color: orange; }
</style>

<div id="papa">
        <div id="mlist"></div>
</div>

<script>
        let m_ar = [
                ['https://music.163.com/song/media/outer/url?id=1911025315.mp3','春节序曲'],
                ['https://music.163.com/song/media/outer/url?id=2000782450.mp3','过年了'],
                ['https://music.163.com/song/media/outer/url?id=1837192825.mp3','新年新歌'],
                ['https://music.163.com/song/media/outer/url?id=395321.mp3','迎宾曲'],
                ['https://music.163.com/song/media/outer/url?id=160343.mp3','普天同庆'],
                ['https://music.163.com/song/media/outer/url?id=538567251.mp3','喜洋洋'],
                ['https://music.163.com/song/media/outer/url?id=395161.mp3','恭喜发财'],
                ['https://music.163.com/song/media/outer/url?id=395313.mp3','步步高'],
                ['https://music.163.com/song/media/outer/url?id=395317.mp3','万事如意'],
                ['https://music.163.com/song/media/outer/url?id=1417438374.mp3','好运来'],
                ['https://music.163.com/song/media/outer/url?id=160351.mp3','百鸟朝凤'],
                ['https://music.163.com/song/media/outer/url?id=395334.mp3','难忘今宵'],
        ];

        let aud = document.createElement('audio');
        papa.appendChild(aud);

        (function addList() {
                let str = '';
                m_ar.forEach( (item,key) => {
                        str += `<a onclick=mplay(${key})>${key+1} ${m_ar}</a><br>`;
                });
                mlist.innerHTML = str;
        })();

        aud.addEventListener('ended', () =>mplay(-1));

        let mplay = (idx=-1) => {
                if (idx < 0) idx = Math.floor(Math.random() * m_ar.length);
                aud.src = m_ar;
                aud.play();
                setRed(idx);
        }

        let setRed= (idx) => {
                let str = mlist.innerHTML;
                str = str.replace(/<\/?span[^\>]*\>/g,'');
                str = str.replace(`${idx+1} ${m_ar}`, `<span class="sColor">${idx+1} ${m_ar}</span>`);
                mlist.innerHTML = str;
        }

        aud.onerror = () => mplay();
        mplay();

</script>

梦油 发表于 2023-1-21 14:58

本帖最后由 梦油 于 2023-1-21 15:00 编辑

真过瘾！我听了两遍啦。这些乐曲我都很喜欢。谢谢你！祝你快乐！

马黑黑 发表于 2023-1-21 15:27

梦油 发表于 2023-1-21 14:58
真过瘾！我听了两遍啦。这些乐曲我都很喜欢。谢谢你！祝你快乐！

兔年快乐

梦油 发表于 2023-1-21 16:14

马黑黑 发表于 2023-1-21 15:27
兔年快乐

除夕吉祥！

千羽 发表于 2023-1-21 16:57

除夕快乐{:4_187:}

马黑黑 发表于 2023-1-21 17:14

千羽 发表于 2023-1-21 16:57
除夕快乐

{:4_176:}

红影 发表于 2023-1-21 18:59

好喜庆啊，黑黑真棒{:4_187:}

亦是金 发表于 2023-1-21 19:01

喜庆！除夕快乐！{:4_176:}

红影 发表于 2023-1-21 19:02

吃完了酒和年夜饭，就等着半夜放鞭炮了。听着歌儿到半夜{:4_173:}

红影 发表于 2023-1-21 19:03

外面鞭炮连天，黑黑除夕快乐{:4_187:}

醉美水芙蓉 发表于 2023-1-21 19:34

马黑黑 发表于 2023-1-21 20:05

醉美水芙蓉 发表于 2023-1-21 19:34
黑黑老师除夕快乐！

节日好

马黑黑 发表于 2023-1-21 20:05

红影 发表于 2023-1-21 18:59
好喜庆啊，黑黑真棒

{:4_191:}

马黑黑 发表于 2023-1-21 20:05

红影 发表于 2023-1-21 19:03
外面鞭炮连天，黑黑除夕快乐

一同快乐

马黑黑 发表于 2023-1-21 20:06

红影 发表于 2023-1-21 19:02
吃完了酒和年夜饭，就等着半夜放鞭炮了。听着歌儿到半夜

{:5_108:}

马黑黑 发表于 2023-1-21 20:06

亦是金 发表于 2023-1-21 19:01
喜庆！除夕快乐！

过年好

樵歌 发表于 2023-1-21 20:36

比春晚的歌好听多了{:4_178:}

雨中悄然 发表于 2023-1-21 21:32

马黑黑的论坛春晚

马黑黑 发表于 2023-1-21 22:10

雨中悄然 发表于 2023-1-21 21:32
马黑黑的论坛春晚

{:4_172:}

小九 发表于 2023-1-21 22:49

黑黑的春晚很精彩{:4_187:}
页: [1] 2
查看完整版本: 喜庆音乐串串烧-问候所有坛友