【自选音乐集】科尔沁夫-心愿
<div style="margin-left:-380px; width:1400px; position:relative; margin-top:53px;"><iframe marginwidth="0" marginheight="0" src="http://up.yinhuabbs.cn/upload/wjlst/bfq1/科尔沁夫-心愿【自选音乐集】.html" allowfullscreen="true" frameborder="0" width="1400" scrolling="no" height="580"></iframe></div><BR><BR><BR><BR> 视频背景播放器代码分享：<div class="cont-area">
<div style="position:relative;width: 1400px;height: 580px;overflow:hidden;top: -10px;left: -10px;">
<div style="left: 0px;position:absolute;top: 0px;">
<div style="z-index: !;width: 1400px; height: 580px; top:0px; left:0px; overflow: hidden;transform:rotate(0deg);background-size: 100% 100%;background-image:url(); text-align: center;">
<metaname="referrer" content="never">
<video frameborder="0" src="https://wjl136.oss-cn-beijing.aliyuncs.com/25/liuyun.mp4" autoplay muted loop="" controls="" style="position:absolute;left:0px;top:-30px;background:#000 ;width:1366px; height: 800px;>
<div style="color:#f88;font-size:2.5em;margin-left:560px;top:0px;"></div>
</div>
<img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/01.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/02.png" /> <img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/03.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/04.png" /> <img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/05.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/06.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/07.png" /><img alt="" class="photo" src="https://wjl136.oss-cn-beijing.aliyuncs.com/huani/08.png" /><img alt="" class="photo" src="https://aimg8.dlssyht.cn/u/1786604/ueditor/image/894/1786604/1753428086611551.png" /><img alt="" class="photo" src="https://aimg8.dlssyht.cn/u/1786604/ueditor/image/894/1786604/1753428085831462.jpg" /><img alt="" class="photo" src="https://aimg8.dlssyht.cn/u/1786604/ueditor/image/894/1786604/1753428086728292.png" />
<style type="text/css">
.photo {
width: 750px;
height: 600px;
position: absolute;
top:0px;
left:450px;
z-index: 300;
filter:contrast(120%)brightness(100%);
-webkit-mask-image: radial-gradient(black 30% ,transparent 75%);
animation: round 56s infinite;
opacity: 0;
}
@keyframes round {1% {
opacity: 0;
transform:translate(0%,-100%)scale(0);}
5% {
opacity: 1;
transform:translate(0%,-100%)scale(0);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,100%)scale(1);}
}
img:nth-child(11) {animation-delay: 150s;}
img:nth-child(10) {animation-delay: 135s;}
img:nth-child(9) {animation-delay: 120s;}
img:nth-child(8) {animation-delay: 105s;}
img:nth-child(7) {animation-delay: 90s;}
img:nth-child(6) {animation-delay: 75s;}
img:nth-child(5) {animation-delay: 60s;}
img:nth-child(4) {animation-delay: 45s;}
img:nth-child(3) {animation-delay: 30s;}
img:nth-child(2) {animation-delay: 15s;}
img:nth-child(1) {animation-delay: 0s;}
</style>
</div>
<style type="text/css">
@keyframes mv { from { background-position: 1366px 0; } to { background-position: 0 0; } }
body { overflow-x: hidden; }
#baiBox {
margin: auto;
width: 800px;
text-align: center;
font-family:微软简中圆;
font-size: 2.5rem;
font-weight: bold;
color: #f46ff6;
transform-origin: top;
animation: yao 1.0s linear infinite alternate;
}
@keyframes yao {
from{transform: perspective(800px) rotatex(30deg); }
to { transform: perspective(800px) rotatex(-30deg); }
}
.tit {
position: relative;
width: 300px;
height: 30px;
top:-560px;
LEFT: -430px;
z-index: 100;
filter: drop-shadow(-1px 0px 1px #ffffff)drop-shadow(0px -1px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)drop-shadow(0px 0px 1px #ffffff)
}
#tit:hover { color: green; }
</style>
<div id="hu" >
<div id="baiBox"
<div class="tit">
<span style="color:#fb52f9;"><span style="font-size:25px;">自选音乐集 </span>
<span style="color:#3d46f7;"><span style="font-size:15px;"> - 群星</span></div>
<div style="position: relative;width: 500px;height: 50px;top:-120px;LEFT: 1100px;z-index: 100;filter: ">
<p><span style="color:#ff0000;"><span style="font-family:幼圆;"><span style="font-size:15px;">忘记了在线音乐</span></span></span></p></div>
</style>
<div style="position: relative; top:-760px;LEFT: 0px;z-index: 12435;">
<style type="text/css">
.lyricDisp{-webkit-text-stroke:1.5px #ffffff;font: bold 2.0em悟空大字库, sans-serif; transition:.3s all ease;font-size:2.0em;}
.lyricDisp:nth-child(1){color:#000080;text-align:left;--aniName:bgMove1;--durTime:100ms;--aniPlayState:running;}
.lyricDisp:nth-child(1)::before{position:absolute;content:attr(data-lrc);width:0;height:100%;left:0;top:0;color: transparent;background: linear-gradient(45deg, #F32121 32%,#8EE73C 43%,#FEFFFF 52%,#091CFD 62%,#36F4B1 75%);-webkit-background-clip: text;-webkit-text-stroke:2px #000000;filter: contrast(110%)brightness(160%);overflow:hidden;white-space:nowrap;animation:var(--aniName) var(--durTime) linear forwards;animation-play-state:var(--aniPlayState);}
.lyricDisp:nth-child(2){color:blue;text-align:center;font-size:0em;}@keyframes bgMove1{from{width:0;}to{width:100%;}}@keyframes bgMove0{from{width:0;}to{width:100%;}}
#LRCShow{position:absolute;left:280px;bottom:0px;width:75%;height:140px;margin:6px auto position:relative;<!--歌词位置-->}
#rdisk{position:absolute;left:83px;bottom:60px;border-radius: 50%;font-size:4em;color:red;animation:circleSmall2 10s linear infinite;animation-play-state:paused;cursor:pointer;<!--光盘位置-->}
@keyframes circleSmall2{0%{transform:rotateX(0deg) rotateY(20deg) rotateZ(360deg);}100%{transform:rotateX(0deg) rotateY(20deg) rotate(0deg);}}
#ground3rd{
width:1366px;height:700px;
position:absolute;font-size:16px;
overflow:hidden;border-radius:0px;
margin:5px 0px 30px -5px;
background:url(https://s4.ax1x.com/2022/03/05/bwbPNq.jpg);
background-position:center;
background-size: cover;
perspective: 1366px;
}
#mpic {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1366px;
height: 700px;
animation: rote 80s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rote {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: -1730px 300px;
}
}
#mpic1 {
position: absolute;
transform: rotateY(0deg);
top: 0px;
left: 0px;
width: 1366px;
height: 700px;
animation: rotet 100s linear infinite;
cursor: pointer;
opacity: 1;
}
@keyframes rotet {
from {
background-position: 0 0;
filter: hue-rotate(360deg)
}
to {
background-position: 0px -1730px;
}
}
#songList li {
cursor: pointer;
color: #ffffff;
font:thick微软雅黑;
font-size:15px;
line-height:25px
}
</style>
<div id="ground3rd">
<div class="itemm">
<div style="width: 1366px;height: 700px;">
<div style="position:relative;width: 1366px;height: 700px;overflow:hidden;top: 0px;left: 0px;">
<div style="left: 0px;position:absolute;top: 0px;">
</div>
<ol id='songList' style="color:red;position:absolute;top:130px;left:60px;"><!--歌曲菜单位置--></ol>
<div id="rdisk"style="width:100px;height:100px;border: 0px solid #000000;
background: url('http://www.bohann.net/data/attachment/forum/202305/21/153532woco6oprxkkuut88.png')0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);
mask: radial-gradient(transparent 7px,#red 0);transform: rotateX(45deg) rotateY(20deg) rotate(0deg);"></div>
<div id="LRCShow"></div>
</div>
<!-- 下面一句是存放歌词的标签 -->
<textarea style="visibility:hidden;" id='lrcContent0'></textarea>
<script type="text/javascript">
var lrcPlayer2=function(){return this.init.apply(this,arguments)};lrcPlayer2.prototype={constructor:lrcPlayer2,init:function(opts){this.lyricTxtObj=document.getElementById(opts.lrcTxtID);lyricTxt=this.lyricTxtObj.innerHTML;this.showLrcObj=document.getElementById(opts.lrcShowID);this.gclines=new Array();for(k=0;k<2;k++){this.gclines=document.createElement('div');this.gclines.className='lyricDisp';this.showLrcObj.appendChild(this.gclines)}this.audioCtrl=document.getElementById(opts.audioCtrl);this.handleLrc(lyricTxt);this.genPlayer(opts.audioURL)},handleLrc:function(lyricTxt){this.lrcVec=new Array();var lyriclist=lyricTxt.split(/\r|\n|\r\n/);for(n=0;n<lyriclist.length;n++){chkTime=lyriclist.match(/\[\d{1,2}:\d{2}.\d{1,3}\]|\[\d{1,2}:\d{2}\]/g);if(chkTime){tIdx=lyriclist.lastIndexOf(']');if(tIdx>0)lrcTxt=lyriclist.substr(tIdx+1);for(m=0;m<chkTime.length;m++){ta=chkTime.substr(1).replace(']','').split(/:/);_t=(+ta)*60+(+ta);if(this.lrcVec.length==0&&_t!=0){this.lrcVec.push()}this.lrcVec.push()}}}this.lrcVec.sort(function(a,b){return(a-b)})},showLrc:function(durTime){this.gclines.innerHTML=this.gclines.dataset.lrc=this.lrcVec.length>0?this.lrcVec:"\u3000";this.gclines.style.setProperty('--aniName','bgMove'+(this.idx%2));this.gclines.style.setProperty('--durTime',durTime+'ms');this.gclines.style.setProperty('--aniPlayState','running')},genPlayer:function(mUrl){this.mObj=document.createElement("audio");this.mObj.loop=false;this.mObj.muted=false;this.mObj.src=mUrl;this.showLrcObj.appendChild(this.mObj);this.idx=0;var that=this;this.mObj.addEventListener('ended',function(){that.idx=0});this.mObj.addEventListener('playing',function(){that.audioCtrl.style.animationPlayState='running';that.gclines.style.setProperty('--aniPlayState','running')});this.mObj.addEventListener('pause',function(){that.audioCtrl.style.animationPlayState='paused';that.gclines.style.setProperty('--aniPlayState','paused')});this.mObj.addEventListener('error',function(){console.log("audio wrong, remove play start event");that.showLrcObj.style.display='none';that.showLrcObj.removeChild(this)});this.mObj.addEventListener('timeupdate',function(){if(this.currentTime>that.lrcVec){if(that.idx<(that.lrcVec.length-1)){that.showLrc((that.lrcVec-that.lrcVec)*950)}else{that.showLrc((this.duration-that.lrcVec)*950)}if(that.idx+1==that.lrcVec.length){that.gclines.innerHTML=""}else{that.gclines.innerHTML=that.lrcVec}that.idx++}});this.audioCtrl.onclick=function(){if(that.mObj.paused){that.mObj.play()}else{that.mObj.pause()}};try{this.mObj.play()}catch(err){console.log(err.message)}},stopMusic:function(){this.mObj.pause();this.mObj.controls=false;},setAudioUrl:function(mUrl){this.mObj.src=mUrl},isMusicEnd:function(){return this.mObj.ended},reStart:function(){this.idx=0;this.mObj.play()}}
</script>
<script type="text/javascript">
(function() {
songParas = [
["科尔沁夫-心愿","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424635145806.mp3",`心愿科尔沁夫
词：姜仁波
曲：赵天华
唱：科尔沁夫
混音：关青云
编曲：赵天华
马头琴：阿冷
制作人：科尔沁夫
出品；画你文化传媒（北京）有限公司
发行：音旅文化
我想用天边
天边的彩云
剪成一朵美丽的花瓣
让它沾满我的思念
穿越那片茫茫草原
我想把遥远
遥远的期盼
化作一场相逢的温暖
让它走进你的心间
聆听我的万语千言
云是我的信笺
我的信笺
风是我的呼唤
月光下我把
马奶酒斟满
今夜只等与你
梦里相见
我想用天边
天边的彩云
剪成一朵美丽的花瓣
让它沾满我的思念
穿越那片茫茫草原
我想把遥远
遥远的期盼
化作一场相逢的温暖
让它走进你的心间
聆听我的万语千言
云是我的信笺
我的信笺
风是我的呼唤
月光下我把
马奶酒斟满
今夜只等与你
梦里相见
你是我的思念
我的思念
月是我的缠绵
篝火旁我把
爱的心点燃
今夜我想与你
梦里相见`],
["雪莲花的心愿-科尔沁夫","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424741889665.mp3",`雪莲花的心愿
作词：姜仁波
作曲：赵天华
演唱：科尔沁夫
编曲：赵天华
马头琴：阿冷
伴唱：莫晓伦
录音：赵天华
混音：关青云
音乐监制；尹宏峰
制作人：科尔沁夫
出品：北京天华音乐工作室
发行：内蒙古音旅文化传媒有限公司
是谁把思念冰封在雪山
化作相思泪流进我心间
是谁把爱恋留在了高原
让我守候着美丽的情缘
是谁的身影带走了思念
化作一片云飘向了遥远
是谁的等待盛开成雪莲
让我依恋着心香心香的花瓣
雪莲花的心愿你可曾听见
转动的经筒为我祈求着心愿
那一个在梦里想念的人啊
是你的身影让我望眼欲穿
是谁的身影带走了思念
化作一片云飘向了遥远
是谁的等待盛开成雪莲
让我依恋着心香心香的花瓣
雪莲花的心愿你可曾听见
转动的经筒为我祈求着心愿
那一个在梦里想念的人啊
是你的身影让我望眼欲穿
雪莲花的心愿你可曾听见
悠悠的情歌为你唱过了千遍
那一个在梦里想念的人啊
等你的身影在月光下出现
等你的身影在月光下出现`],
["送亲歌-云飞","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424826887392.mp3",`送亲歌 - 云飞
词：鄂尔多斯民歌
曲：鄂尔多斯民歌
鸿雁展翅向南方
芳草低头躲秋凉
含泪告别阿爸阿妈
孩儿出嫁到远方
云雾缭绕在草原上
秋风吹来花凄凉
含泪告别众乡亲
今日出嫁到远方
鸿雁展翅向南方
芳草低头躲秋凉
含泪告别阿爸阿妈
孩儿出嫁到远方
马儿送我去远方
阿爸阿妈送安康
家里的奶茶常醉人
阿爸阿妈情谊深
家里的奶茶常醉人
阿爸阿妈情谊深 `],
["乌兰齐齐格 - 送亲歌","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424898391053.mp3",`送亲歌 - 娜仁齐齐格
鸿雁展翅向南方
芳草地头多秋凉
含泪告别阿爸阿妈
孩儿出嫁到远方
云雾缭绕在草原上
秋风吹冷花凄凉
含泪告别众乡亲
今日出嫁到他乡
当年牧羊在西山岗
冬暖草场花最香
家中的奶茶常醉人
阿爸阿妈恩情长
男儿送我到远方
阿爸阿妈保安康
来世托身男子汉
终身陪伴在父老身旁
来世托身男子汉
终身陪伴在父老身旁 `],
["筱林萨克斯-送亲歌（bB-次中音与马头琴）","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753424953719584.mp3",`正播放：筱林萨克斯-送亲歌（bB-次中音与马头琴）`],
[" 群星-送亲歌 (纯音乐) ","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753425008933617.mp3",`正播放： 群星-送亲歌 (纯音乐) `],
["月亮落进山谷里-达坡玛吉","","https://aimg8.dlssyht.cn/u/1786604/ueditor/video/894/1786604/1753425062364092.mp3",`月亮落进山谷里
达坡玛吉 词曲
演唱：达坡玛吉
月亮落进山谷里篝火点亮满星天满星天
站在古街的木桥上遥望马帮远去的背影
别告诉我你的心儿化成了云烟
别告诉我你的心儿化成了云烟
月亮落进山谷里玉水沐浴雪山颠雪山颠
走在清清的泉水边聆听雪山融化的声音
别告诉我你的雪花飞上了蓝天
别告诉我你的雪花飞上了蓝天
别告诉我你的雪花飞上了蓝天
只有遇到痴心的情郎阿妹才会歌唱罗 `],
];
var opts = {
lrcTxtID:'lrcContent0',
lrcShowID:"LRCShow",
audioURL:"https://www.qqmc.com/up/kwlink.php?id=60010502&.mp3",
audioCtrl:'rdisk'
};
var km = null;
var idx = 0;
let songList = document.getElementById('songList');
for(n = 0; n < songParas.length; n++) {
let item = document.createElement('li');
item.id = 's'+n;
item.innerHTML = songParas;
songList.appendChild(item);
}
items = songList.getElementsByTagName('li');
for(n = 0 ; n < items.length; n++) {
items.onclick=function() {
idx = parseInt(this.id.substr(1));
document.getElementById('ground3rd').style.backgroundImage = `url(${songParas})`;
if(km){
km.stopMusic();
//km = null;
km.handleLrc(songParas);
km.setAudioUrl(songParas);
km.reStart();
}
else {
document.getElementById(opts.lrcTxtID).innerHTML = songParas;
opts.audioURL=songParas;
km = new lrcPlayer2(opts);
}
}
}
items.click();
setInterval(() => {
if(km) {
items = songList.getElementsByTagName('li');
if(km.isMusicEnd()) {
idx++; idx %= items.length;
items.click();
}
}
//setTimeout(isSongEnded, 500);
}, 500);
})();
</script>
富有磁性的嗓音，浓郁的草原风情，整首曲子很是有感染力。 精彩的音乐自选集，制作漂亮！:handshake 看了二楼的代码就知道做这样一张帖子的艰辛呀{:1_154:} 问好忘不了，制作分享辛苦了哦，谢谢{:1_153:}
周末快乐~~ 欣赏老师带来的精彩制作，
制作漂亮，
很棒的意境，
画面优美，
歌曲好听，
制作辛苦，
祝创作愉快！
欣赏老师美作，感谢精彩分享，感谢给大家带来美滴享受！ 与帅一样的想法
做个音乐帖代码相当不易
谢谢谁疼老师的无私分享 自选集汇集了七首草原歌曲
演绎了草原的辽阔以及美丽
让我们沉浸在天籁之音之中
页:
[1]
2