花甲走四方 发表于 2026-7-31 09:57

陕北民歌《泪蛋蛋泡在沙蒿蒿里》

<style>
#tz { margin: 30px 0 30px calc(50% - 593px); width: 1024px; height: 576px; background: url('https://picasa.eu.org/i/2026/07/31/5leo9n.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px gray; z-index: 1; position: relative; }
#tz::before { content: attr(data-lrc); position: absolute; top: 15px; width: 100%; height: 60px; text-align: center; font: normal 32px/60px sans-serif; color: transparent; text-shadow: 2px 2px 2px rgba(0,0,0,.8); background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text; }
#player { left: 30px; top: 30px; width: 160px; height: 160px; filter: drop-shadow(0 0 50px white); cursor: pointer; transition: .5s; position: absolute; display: grid; place-items: center; animation: rot 8s linear infinite var(--state); }
#player:hover { width: 200px; }
c-c { position: absolute; width: 85%; height: 30px; border: 12px double plum; border-radius: 50%; opacity: .75; }
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="tz" data-lrc="泪蛋蛋泡在沙蒿蒿里">
      <audio id="aud" src="https://mpimg.cn/view.php/9794448390726b0380d4bcaf4baeb729.mp3" autoplay loop></audio>

      <div id="player"></div>
</div>

<script>
var curkey = 0, lrcAr = [], total = 8;
Array.from({length: total}).forEach((c,k) => {
      c = document.createElement('c-c');
      c.style.cssText += `
                transform: rotate(${360 / total * k}deg);
                border-color: #${Math.random().toString(16).substring(2,8)};
      `;
      player.appendChild(c);
});
var getAr = (text) => {
      var ar = text.trim().split('\n');
      ar.sort();
      var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
      ar.forEach(item => {
                let result = item.match(reg);
                let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
                lrcAr.push(.trim()]);
      });
};
var mState = () => {
      tz.style.setProperty('--state', ['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
      if(curkey > lrcAr.length - 1) return;
      if(aud.currentTime >= lrcAr) {
                tz.dataset.lrc = lrcAr;
                curkey ++;
      }
};
player.onclick = () => aud.paused ? aud.play() : aud.pause();

var lrc = `泪蛋蛋泡在沙蒿蒿里
陕北民歌
演唱：冯建雪
1988年录音
羊(啦)肚子（哎）手巾(呦)三道道藍
(咱們)見個面來容易
(哎呀)拉話話難
一個在那（哎）山上(呦)一個在(那)溝
(咱們)拉不上(那)話兒(哎呀)
招一招手
了(啦)見那（哎）村村(呦)
了不見(那)人
我淚（格）蛋蛋拋在(哎呀)沙蒿蒿林
我淚（格）蛋蛋拋在(哎呀)沙蒿蒿林
感谢欣赏聆听`;
getAr(lrc);
</script>

梦油 发表于 2026-7-31 14:33

民歌里有乡情。

杨帆 发表于 2026-7-31 14:59

很喜欢的一首民歌，谢谢走四方老师精彩分享{:4_190:}

梦江南 发表于 2026-7-31 19:09

谢谢高老师民歌分享，好听！{:4_187:}

红影 发表于 2026-7-31 19:55

好听的陕北民歌，这首记得很有名的，坛子里好像有人唱过的呢{:4_173:}
欣赏高老师好帖{:4_187:}
页: [1]
查看完整版本: 陕北民歌《泪蛋蛋泡在沙蒿蒿里》