控制歌词特效和频谱的HTML5音画《情字最大 (DJheap九天版) - 王富贵》
<div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/4cca52b1a62e7e197fffa68a0bc9a1c8.jpg)110px 0/110%110%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;"><div class="HT">
<divid="testImg" class="love"><img src="http://pan.yinhuabbs.cn/view.php/0f7e9e5eb78eb211daf79819944818be.png" style="width: 100%; height: 100%;z-index: 150;" >
</div>
<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/mp3/music175397262.mp3" loop="" ></audio>
<div class="btn">
<divid="testImg"onclick="bf()"><input type="button" id="testBtn"value="暂停"></div>
</div>
<div class="img_border"id="aplay"style="width: 100%; height: 100%;position: absolute;top:0px; left:0px;z-index: 250;transform:translate(0%,0%)scale(1);filter:hue-rotate(160deg)"
>
<div class="lrc">
<ul id="ullrc">
</ul>
</div></div>
</div>
</div></div>
<style type="text/css">
.love {margin: 0 auto;position: absolute;top:50px; left:40px;z-index: 150;
display: block;
width: 300px; height: 300px;
animation: heart-burst 0.3s infinite ;
}
.stop {
animation-play-state: paused;
}
@keyframes heart-burst {
0% {transform: translate(0%,0%)scale(0.2);}
50% {transform:translate(0%,0%)scale(1.5);filter:hue-rotate(360deg)}
100% {transform: translate(0%,0%)scale(0.2);}
}
</style>
<script >
var image = document.getElementById("testImg"),
button = document.getElementById("testBtn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '暂停') {
image.classList.add('stop');
this.value = '播放';
} else {
image.classList.remove('stop');
this.value = '暂停';
}
};
}
</script>
<style type="text/css">
.HT{
width: 1000px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;
}
.btn{
display: block;z-index: 300;
margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.lrc{
width: 980px;
height: 140px;
overflow: hidden;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
display: block;position: absolute;top:480px; left:50px;z-index: 300;
margin: 0 auto;
}
.container .lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
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;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;
}
/*gc特效*/
.img_border{display:inline-block;position: absolute;top:0px; left:0px;z-index: 200;}
.img_border #aplay{ }
.z360z{animation:rotating 4s linear infinite}@keyframes rotating{0%{transform:rotateY(-180deg) rotatex(40deg) ;
filter:hue-rotate(0deg)brightness(150%);}
50%{transform:rotateY(-20deg) rotatex(10deg);
filter:hue-rotate(360deg)brightness(100%);}
100%{transform:rotateY(-20deg) rotatex(10deg);
filter:hue-rotate(0deg)brightness(100%);}
}
</style>
<script>var lrc =`情字最大 (DJheap九天版) - 王富贵
词：高启翔
曲：高启翔
编曲：DJheap九天
反正是 天大地大 四海为家
清风 白昼 翻过了九州
天高任我游 我在 雪下白了头
佛前参不透 众生皆沦为苍狗
不必追问 是否或是知否
反正是 天大地大 四海为家
一曲终 需尽欢 断肠人在天涯
幸好是 了无牵挂 白云遮马
心上花 佛前挂 何必惊扰了晚霞
就算是 青丝变白发 人生来去几个夏
世间事 最难断 唯独情字最大
只能是 了断了牵挂 孑然一身又何怕
只留下 乱世浮沉走马 独潇洒
清风 白昼 翻过了九州
天高任我游 我在 雪下白了头
佛前参不透 众生皆沦为苍狗
不必追问 是否或是知否
反正是 天大地大 四海为家
一曲终 需尽欢 断肠人在天涯
幸好是 了无牵挂 白云遮马
心上花 佛前挂 何必惊扰了晚霞
就算是 青丝变白发 人生来去几个夏
世间事 最难断 唯独情字最大
只能是 了断了牵挂 孑然一身又何怕
只留下 乱世浮沉走马
反正是 天大地大 四海为家
一曲终 需尽欢 断肠人在天涯
幸好是 了无牵挂 白云遮马
心上花 佛前挂 何必惊扰了晚霞
就算是 青丝变白发 人生来去几个夏
世间事 最难断 唯独情字最大
只能是 了断了牵挂 孑然一身又何怕
只留下 乱世浮沉走马 独潇洒`;
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 = 80, lrc_ul_height = 70;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
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 = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
function bf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
if (audio !== null) {
if (audio.paused) {
audio.play(); //audio.play();// 这个就是播放
bf.innerText="暂停";
} else {
audio.pause(); // 这个就是暂停
bf.innerText="播放";
}
}
}
</script>
<script type="text/javascript">
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="z360z";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script> 欣赏老师的新播放器，好看好听，问好！{:4_171:} 歌词好炫啊。真漂亮的制作。欣赏亚伦老师好帖{:4_187:} 这个png频谱图片不能显示--http花潮看不见
页:
[1]