论坛 › 动画音画 › HTML5全控高级音画 红尘痴笑一场梦-安儿陈

亚伦影音工作室 发表于 2022-8-12 19:49

HTML5全控高级音画 红尘痴笑一场梦-安儿陈

本帖最后由 亚伦影音工作室 于 2022-8-12 19:49 编辑 <br /><br /><div style="z-index: 127;width: 1024px; height: 600px; margin-top:50px; margin-left:-130px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:linear-gradient(180deg, rgba(255, 224, 0, 0.45) 0%,rgba(5, 246, 93, 0.41) 25%,rgba(1, 50, 251, 0.29) 47%,rgba(243, 5, 5, 0.45) 85%),url(http://pan.yinhuabbs.cn/view.php/d9675a355e1ca5d8a204f193793843d0.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;">
<div class="items" >
<div class="bg">
<div id="aplay">
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3d7d6a01abc0c65cb3f9f619b509d39b.jpg" style="width: 1024px;height: 600px;transform: perspective(600px)rotateY(45deg)scale(0.6);box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;" />
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b16502f0e9cb626095f4d2a53d2b4925.jpg"/>
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/14ada69fa0d0da7d3737dfa1cf58de77.jpg"/>
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/3b639b214d31fe83a6f5ffb0e28d7644.jpg" />
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/799a46ea45dfccb929b5161f07361643.jpg"/>
      <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/958625d41266b045d6d37baa0671ffd8.jpg"/>
      <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b858cb8d4d309b062c4d712fdff30e6d.jpg"/>
        <img class="cb-slideshow" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/565073294e63c0bc59cb263e53457c4c.jpg"/>
        </div></div>
<div class="BJ">
<audio autoplay="" class="audio" id="MusicPlayer" src="https://www.qqmc.com/mp3/music231202863.mp3" controls loop style="width: 1%;
height: 1%;z-index: 1;"></audio>
      <div class="btn">
      <div id="playpause"style="position:absolute;top:-20px; left:80px;width:960px;height:180px;z-index: 600;"/>      </div>
      </div>

      
<divclass="lrc">
      <ul id="ullrc">
         </ul>
      </div>
</div></div></div>
<style type="text/css">
.bg {
width: 1024px;
height: 600px;
position: absolute;
top: 0px;
left: 0px;overflow: hidden;
}
.cb-slideshowimg{
width: 100%;
height: 100%;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 10px #880000;
position: absolute;
top: 0px;
left: 0px;display: block;transform:translate(-130%,-10%);
opacity: 0;
z-index: 100;
animation: imageAnimation 32s infinite;
}

.cb-slideshow#aplay{}



.cb-slideshow :nth-child(8){

animation-delay: 28s
}

.cb-slideshow :nth-child(7){

animation-delay: 24s;
}

.cb-slideshow :nth-child(6){

animation-delay: 20s;
}

.cb-slideshow:nth-child(5) {

animation-delay: 16s
}

.cb-slideshow :nth-child(4){

animation-delay: 12s;
}
.cb-slideshow :nth-child(3){

animation-delay: 8s;
}
.cb-slideshow :nth-child(2){

animation-delay: 4s;
}
#aplay.cb-slideshow :nth-child(1){

animation-delay: 0s;
}


@keyframes imageAnimation {
0% {opacity: 1;transform:rotateX(-180deg) translateZ(10.90909px);}
5% {opacity: 1;transform: perspective(600px) rotateY(45deg)scale(0.6)}
8% {opacity: 1;transform: perspective(600px) rotateY(-45deg)scale(0.6)}
12% {opacity: 1;transform: perspective(600px) rotateY(0deg)scale(0.6)}
18% {opacity: 0;transform: perspective(600px) rotateY(0deg)scale(1.8)}
}
</style>
<style type="text/css">
.BJ{width: 1px;height: 1px;
    margin: 0;position: absolute;top:500px; left:-30px;z-index: 100;
}
#MusicPlayer{
    width: 250px;
    display: block;
    margin: 0 auto;
}
.btn{
    display: block;z-index: 300;
    margin: 0;
}
.lrc{
    width: 960px;
    height: 180px;z-index: 1;
    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:-20px; left:80px;
    margin: 0 auto;
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 80px;
    line-height: 90px;
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: 35px;
    color: #ff0000;transform: translate(0%,0%);
    font-weight: bold;
}

.audio{
    z-index: 1;
    bottom: 0;
    opacity: 0;
transition: all 2s;
width: 1px;
height: 1px;
position: absolute;top:0px; left:0px;
}
.audio:hover{
    opacity: 0;
}
</style>
<style type="text/css">.items{ z-index: 1540;animation: slider 3s linear infinite ;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(100%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(110%)brightness(100%);}}
</style>
<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 = 80, lrc_ul_height = 90;
    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>
       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://chuangshicdn.data.mvbox.cn/album/22/08/12/22081218443640171058.gif";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://chuangshicdn.data.mvbox.cn/album/22/08/12/22081218423650143637.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="cb-slideshow ";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);

</script>



</br>
</br>
</br>
</br>
</br>点击歌词，特效，音乐，歌词暂停

亚伦影音工作室 发表于 2022-8-12 19:52

H5全控音画特点：画面特效，音乐，歌词可手动暂停或开启，得到同步可控效果。其优点堪称动画小视频，缺点是若音乐地址失效，画面，歌词同步不能显示！制作时要选择有效的音乐地址，另图片地址也要选择可外链的网站的图片。

红影 发表于 2022-8-12 20:44

这制作真棒，欣赏亚伦老师好帖{:4_187:}

查看完整版本: HTML5全控高级音画 红尘痴笑一场梦-安儿陈