东方大国 - 纯音乐 - 音乐沙龙 - 花潮论坛

杨帆发表于 2024-11-27 14:38

东方大国 - 纯音乐

本帖最后由杨帆于 2024-12-22 20:34 编辑 <br /><br /><style type="text/css">
#papa { margin: 130px 0 30px calc(50% - 780px);width: 1400px; height: 717px; background-blend-mode:hue;background:url(https://pic.imgdb.cn/item/6746a9add0e0a243d4d1da26.gif)no-repeatcenter/cover;box-shadow:0px 0px 0px 2px #fff,0px 0px 0px 4px #fff; overflow: hidden; z-index: 12; position: relative; display: grid; place-items: center; }
#pic{width: 100%; height: 100%; position: absolute;top:0px; left:0px;z-index: 1;mix-blend-mode: screen;}
#pic img{height: 100%;width: 100%;}
#btnFs {
position: absolute;
left: 20px;
top: 20px;
padding: 6px;
background: green;
color: white;
border: 2px solid white;
border-radius: 8px;
cursor: pointer;
pointer-events: auto;
z-index: 10;
}
#vid2 {
position: absolute;
left:0px;
top:-90px;
width: 100%;
height:130%;
mix-blend-mode:screen;
opacity: 0.8;
object-fit: cover;
}
#player {
position: absolute;z-index: 20;
left: calc(50% - 15px);
bottom: 5%;
width: 50px;
height: 50px;
border: 3px solid #cccccc;
border-radius: 50%;
opacity: 1;
   cursor: pointer;
pointer-events: auto;
}
.lrc{
width: 100%;
height: 120px;
overflow: hidden;
display: block;position: absolute;top:75%; left:0%;z-index: 5;
margin: 0 auto;}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: bold;
transition: .3s all ease;
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;
text-align: center; color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen) 50%/100px 80px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);
}
</style>
<div id="papa" >
<span id="btnFs"></span>
<div id="pic" ><img id="Img" src="https://pic.imgdb.cn/item/66bb6a3ed9c307b7e92f39d6.gif" alt="" /></div>
<video id="vid2" src="https://img.tukuppt.com/video_show/13928806/00/41/74/60138b832ed1d.mp4" autoplay loop muted></video>
<img id="player" alt="" src="https://xlaj.cn/upfile/202411/30/07.gif" title="播放/暂停" />
<div class="lrc">
   <ul id="ullrc"></ul>
   </div>
<audio id="aud" src="https://www.joy127.com/url/117721.mp3" loop autoplay></audio>
</div>
<script type="module">
import qp from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
qp.fs('papa','btnFs');
</script>
<script>
var mState = () => {
player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')
aud.paused ? (vid2.pause(), image0.stop()) : (vid2.play(), image0.play());
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
   if (this.storeCanvas) {
         // 移除存储的canvas
         this.storeCanvas.parentElement.removeChild(this.storeCanvas);
         this.storeCanvas = null;
         // 透明度还原
         image0.style.opacity = '';
   }
   if (this.storeUrl) {
         this.src = this.storeUrl;
   }
};
HTMLImageElement.prototype.stop = function() {
   var canvas = document.createElement('canvas');
   // 尺寸
   var width = this.width, height = this.height;
   if (width && height) {
         // 存储之前的地址
         if (!this.storeUrl) {
            this.storeUrl = this.src;
         }
         // canvas大小
         canvas.width = width;
         canvas.height = height;
         // 绘制图片帧（第一帧）
         canvas.getContext('2d').drawImage(this, 0, 0, width, height);
         // 重置当前图片
         try {
            this.src = canvas.toDataURL("image/gif");
         } catch(e) {
            // 跨域
            this.removeAttribute('src');
            // 载入canvas元素
            canvas.style.position = 'absolute';
            // 前面插入图片
            this.parentElement.insertBefore(canvas, this);
            // 隐藏原图
            this.style.opacity = '0';
            // 存储canvas
            this.storeCanvas = canvas;
         }
   }
};
}

var image0= document.getElementById("Img");
</script>
<script >
var lrc = `

东方大国
词：苗子
曲：隔壁老陈
编曲：毅然音乐

洲际穿天而飞过
绽放最美的烟火
多少辈人的心血
国之荣辱靠你靠我
世界和平传承者
中华大地的美德
天安门前红旗飘
一带一路喜迎来客
我们生在这个东方大国
可以安居乐业好好生活
远离战乱之火
逃离灾难漩涡
五星红旗永不落
我们生在这个东方大国
延续五千年的不老传说
犹如巨龙盘坐
气势可吞山河
龙的传人一路高歌

世界和平传承者
中华大地的美德
天安门前红旗飘
一带一路喜迎来客
我们生在这个东方大国
可以安居乐业好好生活
远离战乱之火
逃离灾难漩涡
五星红旗永不落
我们生在这个东方大国
延续五千年的不老传说
犹如巨龙盘坐
气势可吞山河
龙的传人一路高歌
我们生在这个东方大国
延续五千年的不老传说
犹如巨龙盘坐
气势可吞山河
龙的传人一路高歌
龙的传人一路高歌
`;
function $(id) {
return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
   parts = getLrcObj(parts);
}
return parts;

function getLrcObj(content) {
   var twoParts = content.split("]");
   var time = twoParts.substr(1);
   var timeParts = time.split(":");
   var seconds = +timeParts;
   var min = +timeParts;
   seconds = min * 60 + seconds;
   var words = twoParts;
   return{
         seconds: seconds,
         words: words,
   };
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
   var li = document.createElement("li");
   li.innerText = lrcArray.words;
   $("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
   return;
}
var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
var top = index * lrc_li_height + lrc_li_height / 3 - lrc_ul_height / 3;
if (top < 0) {
   top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
   activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
   if (lrcArray.seconds > time) {
         return index - 1;
   }
}
}
$("aud").ontimeupdate = setPosition;
</script >

夕阳黄昏 发表于 2024-11-27 15:02

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

杨帆发表于 2024-11-27 15:37

夕阳黄昏发表于 2024-11-27 15:02

问好夕阳老师，谢谢鼓励，祝开心{:4_191:}

梦油发表于 2024-11-27 17:44

欣赏美乐，问候杨帆。

杨帆发表于 2024-11-27 18:46

梦油发表于 2024-11-27 17:44
欣赏美乐，问候杨帆。

问好梦油超版，谢谢鼓励，祝开心{:4_191:}

红影发表于 2024-11-27 20:33

很大气豪迈的制作，很正能量的帖子。给杨帆点赞{:4_199:}

红影发表于 2024-11-27 20:34

这个能点开全屏了，不过点击暂停按钮，好像只有一个视频能暂停？还一个动态暂停不了呢{:4_173:}

小辣椒 发表于 2024-11-27 22:00

这个东方大国有歌词同步的音乐的，杨帆这么用了纯音呢

小辣椒 发表于 2024-11-27 22:01

欣赏杨帆精彩的制作{:4_187:}

杨帆发表于 2024-11-27 22:44

红影发表于 2024-11-27 20:34
这个能点开全屏了，不过点击暂停按钮，好像只有一个视频能暂停？还一个动态暂停不了呢

谢谢影子鼓励，那一个动态是一gif图片呀

杨帆发表于 2024-11-27 22:46

本帖最后由杨帆于 2024-11-27 22:47 编辑

小辣椒发表于 2024-11-27 22:00
这个东方大国有歌词同步的音乐的，杨帆这么用了纯音呢
让小辣椒唱呀，换一种风格，别样感受一下{:4_204:}

红影发表于 2024-11-27 23:24

杨帆发表于 2024-11-27 22:44
谢谢影子鼓励，那一个动态是一gif图片呀

哦，我以为也是个视频呢{:4_173:}

梦油发表于 2024-11-28 14:09

杨帆发表于 2024-11-27 18:46
问好梦油超版，谢谢鼓励，祝开心

杨帆朋友别客气。

小辣椒 发表于 2024-11-29 20:47

杨帆发表于 2024-11-27 22:46
让小辣椒唱呀，换一种风格，别样感受一下

这首东方大国有歌词同步的，网络上你没有听到过？刀郎演唱会就有

杨帆发表于 2024-11-30 00:21

本帖最后由杨帆于 2024-11-30 01:09 编辑

小辣椒发表于 2024-11-29 20:47
这首东方大国有歌词同步的，网络上你没有听到过？刀郎演唱会就有
是，好多版本呢，这里感受一下“歌词+器乐”的味道，提升体验。

小辣椒 发表于 2024-11-30 20:17

杨帆发表于 2024-11-30 00:21
是，好多版本呢，这里感受一下“歌词+器乐”的味道，提升体验。

是的，你这个纯音也是不错的

杨帆发表于 2024-11-30 20:35

夕阳黄昏发表于 2024-11-27 15:02

请问夕阳老师，如何控制gif动图呢？以本帖为例。谢谢{:5_116:}@夕阳黄昏

夕阳黄昏 发表于 2024-11-30 21:35

杨帆发表于 2024-11-30 20:35
请问夕阳老师，如何控制gif动图呢？以本帖为例。谢谢@夕阳黄昏

仅对此帖很容易，因为条件具备了，原来有
aud.paused ? vid2.pause() : vid2.play();

增加对gif的控制，修改为
aud.paused ? (vid2.pause(), image0.stop()) : (vid2.play(), image0.play());

就行了。

杨帆发表于 2024-11-30 22:12

夕阳黄昏发表于 2024-11-30 21:35
仅对此帖很容易，因为条件具备了，原来有

增加对gif的控制，修改为

哇，夕阳老师您也太厉害了！由衷感谢{:4_191:}

页: [1]

花潮论坛's Archiver

东方大国 - 纯音乐