动感可控html5播放器简介《姐已不再是当年的姐(DJ默涵版) - 郭芊彤》

亚伦影音工作室 · 发表于 2022-5-4 18:51

[i=s] 本帖最后由亚伦影音工作室于 2022-5-4 19:00 编辑 [/i]

亚伦影音工作室 · 发表于 2022-5-4 18:54

本帖最后由亚伦影音工作室于 2022-5-4 21:23 编辑

html部分：

<div style="z-index: 127;width: 1000px; height: 600px; margin-top:30px; margin-left:30px; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 15px #880000; overflow:hidden;transform: rotate(0deg); background: url(背景图片地址) 0 0/100% 100%; text-align: center;">
<img class='photo' src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/565073294e63c0bc59cb263e53457c4c.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080"alt="1图片地址" />
<img class='photo' src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/7909e2d575c7a88c70e4d0e3c2e02b87.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080"alt="2" />
<img class='photo' src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/6a04aa78e43c52b1c97a0d9dd0e302f0.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080"alt="3" />
<img class='photo' src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b858cb8d4d309b062c4d712fdff30e6d.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080"alt="4" />
<img class='photo' src="https://img-baofun.zhhainiao.com/fs/d987e9aa816a8861e4c6fc02b3d89bf1.jpg" alt="5" />
<img class='photo' src="https://img-baofun.zhhainiao.com/fs/fbaab93baffecdf789e24143523dde47.jpg" alt="6" />
<img class='photo' src="https://img-baofun.zhhainiao.com/fs/6edb7c9c8c361a448a07e28c5a26c204.jpg" alt="7" />
<img class='photo' src="https://img-baofun.zhhainiao.com/fs/6df20f222a7809f6f2f51e324ebd592a.jpg" alt="8" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://url.amp3a.com/kuwo.php/213342960.mp3" controls loop style="width: 0%; height: 0%;z-index: 1;"></audio>
<div class="btn">
<img src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png" id="playpause"style="position:absolute;top:23px;left:85px;width:40px;height:40px;filter:drop-shadow(#000000 1px 0 0)drop-shadow(#000000 0 1px 0)drop-shadow(#000000 -1px 0 0)drop-shadow(#000000 0 -1px 0);z-index: 600;"/></div>
<div class="img_border" id="aplay"></div>
<div class="bs" style="width: 980px; height: 120px;z-index: 300;position: absolute;top:0px; left:0px;">
<div class="lrc">
<ul id="ullrc">
</ul>
</div></div></div>
</div>

松柏一 · 发表于 2022-5-4 20:25

本帖最后由松柏一于 2022-5-4 20:28 编辑

欣赏学习老师精彩音画，收藏学习

亚伦影音工作室 · 发表于 2022-5-4 21:17

css部分：

<style type="text/css">
.photo {width: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;z-index: 150;
filter:contrast(120%)brightness(80%);-webkit-mask-image: radial-gradient(black 25% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(100%,-100%)scale(1);}
5% {
opacity: 1;
transform:translate(100%,-100%)scale(1);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(3);}
}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-20px;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;
margin: 0;}
.container .lrc{
width: 960px;
height: 120px;
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 -1px 0);
display: block;position: absolute;top:-10px; left:50px;
margin: 0 auto;}
.container .lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 70px;
line-height: 70px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 45px;
color: #ff0000;
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
<style type="text/css">
.photo {width: 1000px;
height: 600px;
position: absolute;top:0px; left:0px;z-index: 150;
filter:contrast(120%)brightness(80%);-webkit-mask-image: radial-gradient(black 25% ,transparent 70%);
animation: round 48s infinite;
opacity: 0;}
@keyframes round {1% {
opacity: 0;
transform:translate(100%,-100%)scale(1);}
5% {
opacity: 1;
transform:translate(100%,-100%)scale(1);}
14% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
16% {
opacity: 1;
transform:translate(0%,0%)scale(1);}
24% {
opacity: 0;
transform:translate(0%,0%)scale(3);}
}
img:nth-child(8) {animation-delay: 42s;}
img:nth-child(7) {animation-delay: 36s;}
img:nth-child(6) {animation-delay: 30s;}
img:nth-child(5) {animation-delay: 24s;}
img:nth-child(4) {animation-delay: 18s;}
img:nth-child(3) {animation-delay: 12s;}
img:nth-child(2) {animation-delay: 6s;}
</style >
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-20px;}
.container #MusicPlayer{
width: 250px;
display: block;
margin: 0 auto;}
.container .btn{
display: block;
margin: 0;}
.container .lrc{
width: 960px;
height: 120px;
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 -1px 0);
display: block;position: absolute;top:-10px; left:50px;
margin: 0 auto;}
.container .lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.container .lrc #ullrc li{
height: 70px;
line-height: 70px;
font-family:华文隶书;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.container .lrc #ullrc li.active{
font-size: 45px;
color: #ff0000;
font-weight: bold}
/*光碟动画*/
.container .img_border{display:inline-block;width:1000px;height:600px;margin:0px ;position: absolute;top:0px;left:0px;transform: scale(1,1);transform:rotateX(0deg) rotateY(0deg)
rotateZ(0deg);}
.container .img_border #aplay{display:block; }
.container .z360z{width: 1000px; height: 600px;
z-index: 130;position: absolute;
top:-500px;
left: 20px;background: url(背景图片地址)0 0/100% 100%;
animation: rotating 0.52s linear infinite;}
@keyframes rotating {from {opacity: 1;filter:hue-rotate(260deg)contrast(100%)brightness(100%);transform: scale(1.012);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(100%)brightness(100%);transform: scale(1);}}
</style>
<style type="text/css">.bs {animation: slider0 0.26s linear infinite ;}
@keyframes slider0 {0%,100%{margin: 0px 0px;filter:hue-rotate(360deg)drop-shadow(0px 0px 12px #CD6600) drop-shadow(0px 0px 12px #CD6600)drop-shadow(0px 0px 12px #CD6600)
brightness(100%);}50%{margin: 0px 0px;filter:hue-rotate(0deg)drop-shadow(0px 0px 12px #000090)drop-shadow(0px 0px 12px #000090)drop-shadow(0px 0px 12px #000090)brightness(100%);}}
</style>

亚伦影音工作室 · 发表于 2022-5-4 21:20

sj部分：

<script >var lrc = `[00:01]姐已不再是当年的姐(DJ默涵版) - 郭芊彤
[00:03]词：穆伊铭
[00:05]曲：罗智鸿
[00:22]曾经很追求浪漫的情节
[00:27]耳听的谎言都当做誓约
[00:32]以为天可崩以为地可裂
[00:37]痴一回疯一回轰轰又烈烈
[00:42]曾经的柔肠打成千千结
[00:47]眼中流着泪心上滴着血
[00:52]我想要一生你却留一夜
[00:56]伤一回痛一回真真又切切
[01:02]姐已不再是当年的姐
[01:07]不再像春花迷恋蝴蝶
[01:12]痴情多一些用心多一些
[01:17]你才能走进我的世界
[01:23]姐已不再是当年的姐
[01:27]不再像秋水空空待月
[01:32]认真多一些温暖多一些
[01:37]我才会陪你白头成雪
[02:04]曾经的柔肠打成千千结
[02:08]眼中流着泪心上滴着血
[02:13]我想要一生你却留一夜
[02:18]伤一回痛一回真真又切切
[02:23]姐已不再是当年的姐
[02:28]不再像春花迷恋蝴蝶
[02:33]痴情多一些用心多一些
[02:37]你才能走进我的世界
[02:43]姐已不再是当年的姐
[02:48]不再像秋水空空待月
[02:54]认真多一些温暖多一些
[02:58]我才会陪你白头成雪
[03:04]姐已不再是当年的姐
[03:08]不再像春花迷恋蝴蝶
[03:14]痴情多一些用心多一些
[03:18]你才能走进我的世界
[03:23]姐已不再是当年的姐
[03:28]不再像秋水空空待月
[03:33]认真多一些温暖多一些
[03:38]我才会陪你白头成雪
[03:44]我才会陪你白头成雪`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts[index] = getLrcObj(parts[index]);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts[0].substr(1);
var timeParts = time.split(":");
var seconds = +timeParts[1];
var min = +timeParts[0];
seconds = min * 60 + seconds;
var words = twoParts[1];
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[index].words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 50;
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[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("MusicPlayer").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray[index].seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
var aud = document.getElementById("MusicPlayer");
var img = document.getElementById("playpause");
img.onclick = function() {
if (aud.paused) {
aud.play();
} else {
aud.pause();
}
}
aud.addEventListener("play", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/35b530b3868a28afe2b97da37543395f.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://pan.yinhuabbs.cn/view.php/60810296157f9035d700f1ab475efcc3.png";
}, false);
</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>

廖若晨星 · 发表于 2022-5-4 21:52

欣赏亚伦影音工作室老师: 动感可控html5播放器简介《姐已不再是当年的姐(DJ默涵版)日台晚上好

醉美水芙蓉 · 发表于 2022-5-4 22:50

欣赏老师佳作！

山水人家 · 发表于 2022-5-5 05:42

欣赏老师精美佳作。

沪上人 · 发表于 2022-5-5 13:08

谢谢介绍！学习分享！

老梦缘 · 发表于 2022-5-6 20:16

欣赏老师的精彩分享，老师辛苦了!

帐号		自动登录	找回密码
密码			注册会员

动感可控html5播放器简介《姐已不再是当年的姐(DJ默涵版) - 郭芊彤》

评分