论坛 › 欢乐水吧 › 《总有美好在路上》—人民日报新媒体跨年主题歌曲等

杨帆 发表于 2025-5-28 19:32

《总有美好在路上》—人民日报新媒体跨年主题歌曲等

<style>
      #papa {
            position: relative;
            --state: running; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); min-height: 80vh; aspect-ratio: 16/9;z-index: 1;
            border-radius: 22px;
            border: 1px double #88abfa;
            box-shadow: 2px 2px 8px #000;
            background: #000;
            overflow: hidden;
      }

      #video {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            opacity: 0.88;
            z-index: 1;
            muted loop;
      }

      #lyrics {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 210px;
            text-align: center;
            font: 600 28px/1.5 华文中宋;
            color: #fff;
            text-shadow: 0 0 15px rgba(255,255,255,0.8);
            z-index: 5;
            overflow-y: hidden;
            scroll-behavior: smooth;
      }

      #lyrics .lyric-line {
            margin: 0;
            height: 42px;
            transition: all 0.3s;
      }

      #playlist {
            display: none;
            position: absolute;
            top: 10%;
            left: 3%;
            width: 380px;
            height: 350px;
            background-color: transparent;
            padding: 15px;
            overflow-y: auto;
            border-radius: 10px;
            z-index: 10;
      }

      #playlist a {
            display: block;
            padding: 10px;
            color: #eee;
            text-decoration: none;
            transition: all 0.3s;
            border-bottom: 1px solid rgba(255,255,255,0.1);
      }

      #playlist a:hover {
            color: rgba(124,252,0,.8);
            transform: translateX(5px);
            font: bold 1.5em 华文宋体;
      }

      #play-btn {
            position: absolute;
            bottom: 5%;
            left: 5%;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: url('https://pic1.imgdb.cn/item/6741e1d8d29ded1a8c23713b.png') center/cover;
            cursor: pointer;
            animation: spin 6s infinite linear;
            animation-play-state: paused;
            z-index: 5;
      }

      @keyframes spin {
            100% { transform: rotate(-360deg); }
      }

      #marquee {
            position: absolute;
            top: 3%;
            left: 60%;
            transform: translateX(-50%);
            width: 80%;
            color: #0667f9;
            font-size: 22px;
            white-space: nowrap;
            overflow: hidden;
            z-index: 5;
      }

      #marquee span {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 30s linear infinite;
      }

      @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
      }

      #progress {
            position: absolute;
            bottom: 10%;
            right: 26.5%;
            width: 600px;
            height: 3px;
            background: #666;
            cursor: pointer;
            z-index: 5;
      }

      #progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #fa4354, #18f5f8);
            width: 0;
            transition: width 0.1s;
            position: relative;
      }

      .time-info {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            color: #fff;
            font-size: 14px;
            font-family: Arial, sans-serif;
      }
      #current-time { left: -50px; }
      #total-time { right: -50px; }

      #menu-toggle {
            position: absolute;
            top: 13px;
            left: 8%;
            color: #fff;
            cursor: pointer;
            z-index: 10;
            padding: 5px 10px;
            background: rgba(0,0,0,0.5);
            border-radius: 5px;
      }
    </style>
    <div id="papa">
      <video id="video" muted loop></video>
      <div id="marquee"><span></span></div>
      <div id="lyrics"></div>
      <div id="play-btn"></div>
      <div id="progress">
            <span id="current-time" class="time-info">00:00</span>
            <div id="progress-bar"></div>
            <span id="total-time" class="time-info">00:00</span>
      </div>
      <div id="menu-toggle">显示歌曲菜单</div>
      <div id="playlist"></div>
    </div>
    <script>
      const audio = new Audio();
      let currentTrack = 0;
      let isDragging = false;
      let lyricsData = [];

      const musicList = [

            {
                title: "梅花泪",
                artist: "文希",
                audio: "https://cccimg.com/view.php/1e13a68a9ac4b24ae6cd8eec5b2c07d8.mp3",
                video:"https://cccimg.com/view.php/038754482b194a4d74312f021c773643.mp4",
                lyrics: `梅花泪 - 文希
词：刘海东
曲：刘亦敏
编曲：冯丹
那日君一别

啊今又雪花飞

思念你的歌
醉了那枝梅

白雪飘红泪
滴滴寒香为谁醉

红颜付流水
片片花骨也成堆
谁说梅花没有泪

只是冰雪
还未寒透梅花蕊
谁说梅花没有泪
只因等你
几度寒来望春归

那日君一别

啊今又雪花飞

思念你的歌

醉了那枝梅
白雪飘红泪
滴滴寒香为谁醉
红颜付流水
片片花骨也成堆
谁说梅花没有泪

只是冰雪
还未寒透梅花蕊
谁说梅花没有泪
只因等你
几度寒来望春归
谁说梅花没有泪

只是冰雪
还未寒透梅花蕊
待到漫山春又红
共吟花前
不枉此生梦一回
共吟花前
不枉此生梦一回
`
            },

             {
                title: "谈写人生",
                artist: "Live合唱",
                audio: "https://cccimg.com/view.php/24a57ab661c1ba4da7d135b2cbd65a25.mp3",
                video:"https://cccimg.com/view.php/cd31ee700a090677f2ca5dd5f15c47fd.mp4",
                lyrics: `谈写人生 - Live合唱版
作词：李云
作曲：李云
录混：高LAO 录音棚
人生要经历多少心酸
一辈子留下有多少遗憾
昨天的故事让人留恋
青春一去不再回还
一天又一天一年又一年
一辈子忙忙碌碌日出下山
风霜和雪雨不怕艰险
只有努力才有明天
人生若在世会有沟沟坎坎
一道道沟沟坎坎一道道弯弯
只要我们闯过那一道道艰险
相信彩虹就在明天
一天又一天一年又一年
一辈子忙忙碌碌日出下山
风霜和雪雨不怕艰险
只有努力才有明天
人生若在世会有沟沟坎坎
一道道沟沟坎坎一道道弯弯
只要我们闯过那一道道艰险
相信彩虹就在明天
人生有多少今天多少明天
走过了多少坡坡多少坎坎
人这一辈子要经历万千
再苦再累也要向前
再苦再累也要向前
`
            },
            {
                title: "平凡日子泛着光",
                artist: "大可",
                audio: "https://cccimg.com/view.php/d47d9f46356c567be664d957358d55ce.mp3",
                video:"https://imgpp.ztupic.com/u/6X8Xv0HBB2/1617066870065_8faf5263.mp4",
                lyrics: `平凡日子泛着光
作词：未子夫
作曲：灰色幽默
编曲：行者孙
混音：边策
制作人：未子夫
监制：灰色幽默
出品：不二指南
就向前走不需要回望
就去远方看山川海洋
就把伤口都藏在过往
对自己说我很不一样
生活难免有些小风浪
夜深难免有点小沮丧
希望你秉持你的天真善良
一生心有所向热烈地生长
要相信平凡日子一样可以泛着光
要相信美好正在奔你而来的路上
要相信风雨之后天空一定有暖阳
人间真的值得来这一趟
要相信平凡日子一样可以泛着光
要相信总有束花是因为你而开放
要相信念念不忘某天一定有回响
别慌太阳下山有月光
生活难免有些小风浪
夜深难免有点小沮丧
希望你秉持你的天真善良
一生心有所向热烈地生长
要相信平凡日子一样可以泛着光
要相信美好正在奔你而来的路上
要相信风雨之后天空一定有暖阳
人间真的值得来这一趟
要相信平凡日子一样可以泛着光
要相信总有束花是因为你而开放
要相信念念不忘某天一定有回响
别慌太阳下山有月光
要相信平凡日子一样可以泛着光
要相信美好正在奔你而来的路上
要相信风雨之后天空一定有暖阳
人间真的值得来这一趟
要相信平凡日子一样可以泛着光
要相信总有束花是因为你而开放
要相信念念不忘某天一定有回响
别慌太阳下山有月光
`
            },
            {
                title: "努力走别回头",
                artist: "Live 合唱",
                audio: "https://cccimg.com/view.php/cb34c7c2e5aa0ff2cabce3d1b73f601e.mp3",
                video:"https://video-qn.51miz.com/preview/video/00/00/65/72/V-657222-6506A22A.mp4",
                lyrics: `努力走别回头(Live 合唱版)
词曲：孙毅然
编曲：毅然音乐
混音：毅然音乐
合唱：毅然合唱团
监制：媛小小
制作人：孙毅然
OP：毅然音乐
努力往前走请不要回头
错过都有错过的理由
最好的放生就是放过自己
不要和往事过不去
健康的身体赛过人民币
快乐心态胜过当皇帝
若问世界上是什么最福气
无病无灾它排第一
首先的你要学会自我快乐
其次的其次其实没有其次
一生要有太多的事情要做
为何不让自己快乐
岁月不及念一晃又是一秋
天冷渐寒添衣无病安好
愿许秋风能知道我的孤独
让风吹走我的忧愁
健康的身体赛过人民币
快乐心态胜过当皇帝
若问世界上是什么最福气
无病无灾它排第一
首先的你要学会自我快乐
其次的其次其实没有其次
一生要有太多的事情要做
为何不让自己快乐
岁月不及念一晃又是一秋
天冷渐寒添衣无病安好
愿许秋风能知道我的孤独
让风吹走我的忧愁
首先的你要学会自我快乐
其次的其次其实没有其次
一生要有太多的事情要做
为何不让自己快乐
岁月不及念一晃又是一秋
天冷渐寒添衣无病安好
愿许秋风能知道我的孤独
让风吹走我的忧愁
`
            },
            {
                title: "总有美好在路上",
                artist: "周深",
                audio: "https://cccimg.com/view.php/1a76957ace434a616d19539b5702d2e7.mp3",
                video:"https://video-qn.51miz.com/preview/video/00/00/66/27/V-662745-6A133EE2.mp4",
                lyrics: ` 作词 : 曹二娜\n 作曲 : 赵家锐\n演唱：周深\n亲爱的\n此刻正是天亮\n快推开窗\n看外面多晴朗\n雨去了\n需要雨的地方\n留给我们\n最灿烂的阳光\n我们在\n用自己的力量\n让美好像\n大树挺拔生长\n花在开云在飘\n笑容在脸上\n我们向前方\n一路向阳\n亲爱的你\n在路上慢慢逛\n看一看太阳\n让风轻轻\n吹拂你的脸庞\n今天过去\n要到明天看看\n天气会怎样\n阴或晴朗\n故事都慢慢赏\n享受每段时光\n爱与希望\n在生活里回响\n夏蝉飞冬雪落\n都是好风光\n治愈我们的\n寒来暑往\n亲爱的你\n在路上慢慢逛\n看一看太阳\n让风轻轻\n吹拂你的脸庞\n今天过去\n要到明天看看\n天气会怎样\n阴或晴朗\n故事都慢慢赏\n亲爱的你\n送走晚风斜阳\n等一等月亮\n美好的事\n在赶来的路上\n世界是颗\n最缤纷的糖\n甜了每个日常\n细细品尝\n就会品出希望\n抬头发现\n光一直在身上
`
            }
      ];

      function togglePlaylist() {
            const playlist = document.getElementById('playlist');
            playlist.style.display = playlist.style.display === 'block' ? 'none' : 'block';
      }

      document.addEventListener('click', (e) => {
            const playlist = document.getElementById('playlist');
            const menuToggle = document.getElementById('menu-toggle');
            if (!menuToggle.contains(e.target) && !playlist.contains(e.target)) {
                playlist.style.display = 'none';
            }
      });

      function updateMarquee(title) {
            const marqueeSpan = document.querySelector('#marquee span');
            marqueeSpan.textContent = `当前播放：${title}`;

            marqueeSpan.style.animation = 'none';
            setTimeout(() => {
                marqueeSpan.style.animation = 'marquee 30s linear infinite';
            }, 10);
      }

      function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60) || 0;
            const secs = Math.floor(seconds % 60) || 0;
            return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
      }

      function initLyrics(lyricText) {
            lyricsData = lyricText.split('\n')
                .filter(line => line.trim())
                .map(line => {
                  const match = line.match(/\[(\d+:\d+\.\d+)\](.*)/);
                  return match ? {
                        time: parseTime(match),
                        text: match.trim()
                  } : null;
                }).filter(Boolean);

            const lyricsHtml = lyricsData.map(line =>
                `<div class="lyric-line">${line.text}</div>`
            ).join('');
            document.getElementById('lyrics').innerHTML = lyricsHtml;
      }

      function togglePlay() {
            if (audio.paused) {
                audio.play();
                document.getElementById('video').play();
                document.getElementById('play-btn').style.animationPlayState = 'running';
            } else {
                audio.pause();
                document.getElementById('video').pause();
                document.getElementById('play-btn').style.animationPlayState = 'paused';
            }
      }

      function startDrag(e) {
            isDragging = true;
            updateProgress(e);
      }

      function handleDrag(e) {
            if (!isDragging) return;
            updateProgress(e);
      }

      function stopDrag() {
            isDragging = false;
            const progressBar = document.getElementById('progress-bar');
            const progress = parseFloat(progressBar.style.width) / 100;
            audio.currentTime = progress * audio.duration;
      }

      function updateProgress(e) {
            const progress = document.getElementById('progress');
            const rect = progress.getBoundingClientRect();
            const offsetX = e.clientX - rect.left;
            const width = rect.width;
            const percent = Math.min(Math.max(offsetX / width, 0), 1);
            document.getElementById('progress-bar').style.width = `${percent * 100}%`;
      }

      function playNextTrack() {
            currentTrack = (currentTrack + 1) % musicList.length;
            loadTrack(currentTrack);
      }

      function init() {
            initPlaylist();
            bindEvents();
            loadTrack(0);
      }

      function initPlaylist() {
            const playlist = document.getElementById('playlist');
            musicList.forEach((track, index) => {
                const a = document.createElement('a');
                a.textContent = `${track.title} - ${track.artist}`;
                a.addEventListener('click', () => loadTrack(index));
                playlist.appendChild(a);
            });
      }

      function bindEvents() {
            document.getElementById('menu-toggle').addEventListener('click', togglePlaylist);
            document.getElementById('play-btn').addEventListener('click', togglePlay);
            document.getElementById('progress').addEventListener('mousedown', startDrag);
            document.addEventListener('mousemove', handleDrag);
            document.addEventListener('mouseup', stopDrag);
            document.getElementById('progress').addEventListener('click', (e) => {
                updateProgress(e);
                const progressBar = document.getElementById('progress-bar');
                const progress = parseFloat(progressBar.style.width) / 100;
                audio.currentTime = progress * audio.duration;
            });

            audio.ontimeupdate = () => {
                if (!lyricsData.length) return;

                const currentTime = audio.currentTime;
                const currentIndex = lyricsData.findIndex(line => line.time > currentTime) - 1;
                const lyricsElement = document.getElementById('lyrics');
                const lines = lyricsElement.querySelectorAll('.lyric-line');
                const lineHeight = 42;
                const containerHeight = 210;

                lines.forEach(line => {
                  line.style.color = '#fff';
                  line.style.fontSize = '1em';
                });

                if (currentIndex >= 0 && currentIndex < lines.length) {
                  const currentLine = lines;
                  currentLine.style.color = '#18f5f8';
                  currentLine.style.fontSize = '1.2em';

                  const targetScroll = currentIndex * lineHeight - (containerHeight/2 - lineHeight/2);
                  const finalScroll = Math.max(0, Math.min(targetScroll, lyricsElement.scrollHeight - containerHeight));
                  lyricsElement.scrollTop = finalScroll;
                }

                if (!isDragging && audio.duration) {
                  const progress = (currentTime / audio.duration) * 100;
                  document.getElementById('progress-bar').style.width = `${progress}%`;
                }

                document.getElementById('current-time').textContent = formatTime(currentTime);
                document.getElementById('total-time').textContent = formatTime(audio.duration);
            };

            audio.onended = playNextTrack;
      }

      function loadTrack(index) {
            currentTrack = index;
            const track = musicList;

            Promise.all([
                new Promise((resolve, reject) => {
                  audio.src = track.audio;
                  audio.onloadedmetadata = resolve;
                  audio.onerror = reject;
                }),
                new Promise((resolve, reject) => {
                  const video = document.getElementById('video');
                  video.src = track.video;
                  video.onloadedmetadata = resolve;
                  video.onerror = reject;
                })
            ]).then(() => {
                audio.play();
                document.getElementById('video').play();
                initLyrics(track.lyrics);
                updateMarquee(track.title);
                document.getElementById('play-btn').style.animationPlayState = 'running';
            }).catch(error => {
                console.error('媒体加载失败:', error);
                playNextTrack();
            });
      }

      function parseTime(timeStr) {
            const = timeStr.split(':').map(Number);
            return minutes * 60 + seconds;
      }

      window.onload = init;
    </script>

梦油 发表于 2025-5-28 19:42

欣赏精彩，问候杨帆。

马黑黑 发表于 2025-5-28 19:50

帖子加载有一点点慢，但的确是个好作品

红影 发表于 2025-5-28 20:55

换歌曲也换视频和播放器呢，这么多歌曲和歌词，制作真不容易。
欣赏杨帆好帖{:4_199:}

红影 发表于 2025-5-28 20:56

第一首歌曲梅花泪的视屏背景我好像在哪个帖子里看到过呢{:4_173:}

杨帆 发表于 2025-5-28 20:58

梦油 发表于 2025-5-28 19:42
欣赏精彩，问候杨帆。

谢谢梦油超版观赏与鼓励，祝开心{:4_191:}

杨帆 发表于 2025-5-28 20:59

马黑黑 发表于 2025-5-28 19:50
帖子加载有一点点慢，但的确是个好作品

鼓捣着玩呢，谢谢老师观赏与鼓励，祝开心{:4_191:}

杨帆 发表于 2025-5-28 21:01

红影 发表于 2025-5-28 20:56
第一首歌曲梅花泪的视屏背景我好像在哪个帖子里看到过呢
表明好看呀，那就多看看呗

谢谢影子观赏与鼓励，祝开心{:4_191:}

马黑黑 发表于 2025-5-28 21:04

杨帆 发表于 2025-5-28 20:59
鼓捣着玩呢，谢谢老师观赏与鼓励，祝开心

{:4_176:}

红影 发表于 2025-5-28 22:54

杨帆 发表于 2025-5-28 21:01
表明好看呀，那就多看看呗

谢谢影子观赏与鼓励，祝开心

不客气啊，问好杨帆，晚上好{:4_187:}

梦江南 发表于 2025-5-29 08:37

每首歌还换视频，还配播放器。{:4_187:}做的真好！

杨帆 发表于 2025-5-29 11:12

梦江南 发表于 2025-5-29 08:37
每首歌还换视频，还配播放器。做的真好！

问好江南，鼓捣着玩呢，祝开心{:4_204:}

清茶煮雪 发表于 2025-5-29 14:56

欣赏老师精彩制作{:4_199:}

清茶煮雪 发表于 2025-5-29 14:57

给老师点赞送花{:4_187:}{:4_180:}

杨帆 发表于 2025-5-29 19:00

本帖最后由 杨帆 于 2025-5-29 19:07 编辑

菲儿 发表于 2025-5-29 14:56
欣赏老师精彩制作
问好菲儿朋友，谢谢观赏与鼓励

欣赏学习你的精彩视频制作，为你点赞{:4_204:}

查看完整版本: 《总有美好在路上》—人民日报新媒体跨年主题歌曲等