论坛 › 动画音画 › 让我带你一起飞 演唱：王爱华/刘习军

亚伦影音工作室 发表于 2024-3-24 17:11

让我带你一起飞 演唱：王爱华/刘习军

本帖最后由 亚伦影音工作室 于 2024-12-22 19:18 编辑 <br /><br /><div id="papa">
<audio   id="aud"src="https://s2.ananas.chaoxing.com/sv-w9/audio/c9/4c/21/4dabe1b0210dd914e6ddbf2b65b699c6/audio.mp3" autoplay loopcontrols crossOrigin="anonymous"></audio>
<div class="lrc">
      <ul id="ul">
      </ul>
    </div>
<div id="testImg" >
<div class="g-container">
<div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>
      <div class="item item-middle"></div>   
</div>
<div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>   
      <div class="item item-middle"></div>   
</div>
</div>
</div>
<canvas id='canvas' width="1164" height="300"style="position: absolute; left:0px; bottom:30px;"></canvas>

</div>
<style>
#papa{width: 1164px; height: 620px; margin-top:130px; margin-left:-300px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://pic.imgdb.cn/item/658d19f6c458853aef55c1ac.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000); text-align: center;}
#aud {position:absolute;margin-top:0px; margin-left:0px;z-index: 60;
    display: block;
    width:102%;clip-path: inset(20% 1% 20% 1%);filter:invert(100%);margin: 580px -14px;
}

.g-container{mix-blend-mode: lighten;margin-top:320px; margin-left:0px;z-index: 2;
display: inline-block;   vertical-align: middle;
perspective: 4px;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear;
}
.stop.g-container{animation-play-state: paused;}
.g-container{
display: inline-block;
vertical-align: middle;
perspective: 4px;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear;
}
.stop .g-group{animation-play-state: paused;}

.g-group{
position: absolute;
/*   perspective: 4px; */
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
animation: move 12s infinite linear;
animation-fill-mode: forwards;
}
.stop .g-group:nth-child(2){animation-play-state: paused;}
.item {
position: absolute;
width: 100%;
height: 100%;
background: url(https://pic.imgdb.cn/item/65eea9f19f345e8d03adc2d9.jpg);
background-size: cover;

opacity: 1;
animation: fade 12s infinite linear;
animation-delay: 0;
}
.stop .item{animation-play-state: paused;}
.g-group:nth-child(2) .item {
animation-delay: -6s;
}

.item-right {
transform: rotateY(90deg) translateZ(500px);
}

.item-left {
transform: rotateY(-90deg) translateZ(500px);
}

.item-top {
transform: rotateX(90deg) translateZ(500px);
}

.item-bottom {
transform: rotateX(-90deg) translateZ(500px);
}

.item-middle {
transform: rotateX(180deg) translateZ(1000px);
}

@keyframes move {
0%{
    transform: translateZ(-500px) rotate(0deg);
}
100%{
    transform: translateZ(500px) rotate(0deg);
}
}

@keyframes fade {
0%{
    opacity: 0;
}
25%,
60%{
    opacity: 1;
}
100%{
    opacity: 0;
}
}

@keyframes hueRotate {
0% {
    filter: hue-rotate(0);
}
100% {
    filter: hue-rotate(360deg);
}
}

.lrc {position:absolute;width: 700px;margin-left:0px; z-index: 6;
    height: 470px;
   border: 0px solid white; text-align: center;
    overflow: hidden;margin: 50px -130px;
}

.lrc #ul {overflow: hidden;
    transition: all 0.6s;
    text-align: center;
}

.lrc #ul li {font-size: 20px;overflow: hidden;
   font-family:华文新魏;text-align: center;
    color: #cccccc;
filter:drop-shadow(#000 1px 1px 1px)drop-shadow(#000 1px 1px 1px);
    height: 40px; font-weight: normal;
    line-height: 30px;
}
.lrc #ulli.active{ transform:translate(20px,0px)scale(1.3);
color: #FF0000;
margin: 0px 0px;
}
</style>
<script>
var lrc = `让我带你一起飞
演唱：王爱华/刘习军
词Lyrics by：刘习军
曲Composed by：刘习军
出品：亚伦影音
OP：亚伦传媒
制作人Producer：亚伦
自从那次的遇见
你就烙印我心田
手牵手来许个愿
陪你岁岁又年年
我愿为你撑片天
疼你爱你永不变
我要爱你万万年
直到沧海变桑田
都说爱情惹人醉
只有你才能体会
不羡鸳鸯不羡仙
一剑一怒为红颜
让我带你一起飞
走遍千山和万水
用我一生把你陪
天涯海角紧相随
今生有你就是我最
幸福的滋味
因为你就是我
最爱的宝贝
无论未来多漫长
我都把你陪
只想和你一生相恋
好好爱一回
都说爱情惹人醉
只有你才能体会
不羡鸳鸯不羡仙
一剑一怒为红颜
让我带你一起飞
走遍千山和万水
用我一生把你陪
天涯海角紧相随
今生有你就是我最
幸福的滋味
因为你就是我
最爱的宝贝
无论未来多漫长
我都把你陪
只想和你一生相恋
好好爱一回
今生有你就是我最
幸福的滋味
因为你就是我
最爱的宝贝
无论未来多漫长
我都把你陪
只想和你一生相恋
好好爱一回
只想和你一生相恋
好好爱一回`;

// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
    audio: document.querySelector("#aud"),
    ul: document.querySelector("#ul"),
    container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
    var lrcData = lrcArr.split(']');
    var lrcTime = lrcData.substring(1);
    var obj = {
      time: parseTime(lrcTime),
      word: lrcData
    }
    result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
    lrcTimeArr = lrcTime.split(":")
    return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
    let Time = doms.audio.currentTime;
    for (let i = 0; i < result.length; i++) {
      if (result.time > Time) {
            return i - 1;
      }
    }
}
// 创建歌词列表
function createElements() {
    let frag = document.createDocumentFragment(); // 文档片段
    for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
    let index = getIndex();
    // 计算滚动距离
    let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
    if (offset < minOffset) {
      offset = minOffset;
    };
    if (offset > maxOffset) {
      offset = maxOffset;
    };
    // 滚动
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 清除之前的active
    let li = doms.ul.querySelector(".active")
    if (li) {
      li.classList.remove("active");
    }
    // 为当前所唱到的歌词添加active
    li = doms.ul.children;
    if (li) {
      li.classList.add("active");
    }
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();

</script>
<script>


window.onload = function() {
    var audio = document.getElementById('audio');
    var ctx = new AudioContext();
    var analyser = ctx.createAnalyser();
    var audioSrc = ctx.createMediaElementSource(aud);
    // we have to connect the MediaElementSource with the analyser
    audioSrc.connect(analyser);
    analyser.connect(ctx.destination);
    // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
    // analyser.fftSize = 64;
    // frequencyBinCount tells you how many values you'll receive from the analyser
    var frequencyData = new Uint8Array(analyser.frequencyBinCount);

    // we're ready to receive some data!
    var canvas = document.getElementById('canvas'),
      cwidth = canvas.width,
      cheight = canvas.height - 2,
      meterWidth = 10, //width of the meters in the spectrum
      gap = 2, //gap between meters
      capHeight = 2,
      capStyle = '#fff',
      meterNum = 1446 / (10 + 2), //count of the meters
      capYPositionArray = []; ////store the vertical position of hte caps for the preivous frame
    ctx = canvas.getContext('2d'),
    gradient = ctx.createLinearGradient(0, 20, 0, 300);
    gradient.addColorStop(0.2, '#ff0000');
    gradient.addColorStop(0.8, '#00ff00');
    gradient.addColorStop(1, '#00ff00');

// loop
    function renderFrame() {
      var array = new Uint8Array(analyser.frequencyBinCount);
      analyser.getByteFrequencyData(array);
      var step = Math.round(array.length / meterNum); //sample limited data from the total array
      ctx.clearRect(0, 0, cwidth, cheight);
      for (var i = 0; i < meterNum; i++) {
            var value = array;
            if (capYPositionArray.length < Math.round(meterNum)) {
                capYPositionArray.push(value);
            };
            ctx.fillStyle = capStyle;
            //draw the cap, with transition effect
            if (value < capYPositionArray) {
                ctx.fillRect(i * 14, cheight - (--capYPositionArray), meterWidth, capHeight);
            } else {
                ctx.fillRect(i * 14, cheight - value, meterWidth, capHeight);
                capYPositionArray = value;
            };
            ctx.fillStyle = gradient; //set the filllStyle to gradient for a better look
            ctx.fillRect(i * 14 /*meterWidth+gap*/ , cheight - value + capHeight, meterWidth, cheight); //the meter
      }
      requestAnimationFrame(renderFrame);
    }
    renderFrame();
    audio.play();
};

</script>
https://s1.krakenfiles.com/uploads/17-04-2024/cG0VaFQmNB/music.m4a

大猫咪 发表于 2024-3-24 19:31

制作真棒！音美图靓！ 谢谢亚伦朋友分享！

{:4_204:}{:4_178:}{:4_199:}

马黑黑 发表于 2024-3-24 21:35

欣赏

红影 发表于 2024-3-25 11:15

漂亮的频谱制作加多行歌词，这制作真美。欣赏亚伦老师好帖{:4_199:}

查看完整版本: 让我带你一起飞 演唱：王爱华/刘习军