首页 › 音画作品 › 人生这趟旅途(Live 合唱版)-怪阿姨

亚伦影音工作室 发表于 2023-12-4 18:59

人生这趟旅途(Live 合唱版)-怪阿姨

本帖最后由 亚伦影音工作室 于 2023-12-7 12:50 编辑 <br /><br /><style>
#papa { margin: 30px -150px; width: 1164px; height: 620px;background:url(https://pic.imgdb.cn/item/64c509b41ddac507ccc4996a.jpg)no-repeat center/cover;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;}
#canv {display: block; position: absolute; top: 370px; left: 0px; }
#mplayer{width:354px; height: 79px;border: none;outline: none;position:absolute; left:40px; top: 40px;z-index: 20; transition: 0.3s all ease; }
#dt{position: absolute;top:0%; left:0%;width: 100%;height: 100%;z-index:1; mix-blend-mode:lighten; }
</style>

<div id="papa">
<div   id="items"><divid="lrcArea"></div></div>
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/653910bdc458853aefaea882.gif" width="100%" height="100%"></div>

<div id="mplayer" >

<img id="picBtn" src="https://pic.imgdb.cn/item/64ee76b5661c6c8e546b61ba.gif" width="100%" height="100%"></div>

<audio id="aud" src="https://aod.cos.tx.xmcdn.com/storages/bf4c-audiofreehighqps/19/1B/GMCoOSQJQ5NoACAAAAKGp8QV.m4a" loop="loop" autoplay="autoplay" crossOrigin="anonymous"></audio>

<canvas id='canv' width="1200" height="250"></canvas>
</div>

<script>
(function () {

        let Act = new AudioContext();

        let audSrc = Act.createMediaElementSource(aud);

        let analyser = Act.createAnalyser();

        audSrc.connect(analyser);

        analyser.connect(Act.destination);

        let ctx = canv.getContext('2d');

        let width = canv.width;

        let height = canv.height;

        let ppColor = ctx.createLinearGradient(0,22,0,300);

        ppColor.addColorStop(0.8, '#00ff00');

        ppColor.addColorStop(0.6, '#FFf000');

        ppColor.addColorStop(0.3, '#ff0000');

        let ppNum = 200;

        let voiceHeight = new Uint8Array(analyser.frequencyBinCount);

(function draw() {

                analyser.getByteFrequencyData(voiceHeight);

                let step = Math.round(voiceHeight.length / ppNum);

                ctx.clearRect(0, 0, width, height);

                for (let j = 0; j < ppNum; j++) {

                        let audiheighteight = voiceHeight;

                        ctx.fillStyle = ppColor;

                        ctx.fillRect(width / 2 + (j * 10), height, 6, -audiheighteight);

                        ctx.fillRect(width / 2 - (j * 10), height, 6, -audiheighteight);

                }

                window.requestAnimationFrame(draw);

        })();

        canv.onclick = () => aud.paused ? aud.play() : aud.pause();

})();
</script>
<style>
#lrcArea ul,#lrcArea li,#lrcArea ol,#lrcArea {margin: 55px ; padding: 0;list-style: none;}
#lrcArea{width: 980px;height: 200%;
overflow: hidden;filter:drop-shadow(#fff000 1px 0 0)drop-shadow(#fff000 0 1px 0)drop-shadow(#fff000 -1px 0 0) drop-shadow(#fff000 0 -1px0);
display: block;margin: 0px -100px;}
#lrcArea ul{width: 100%;150px;
padding: 0;
transition: 0.3s all ease;/*一定要加上不然看着突兀*/
margin: 560px 0px;
}
#lrcArea ul li{height: 0px;
line-height: 0px;
font-family:华文隶书;
font-size: 0px;
color: #000000;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
display: block;
margin: 0px auto;}
#lrcArea ul li.cur{font-size: 45px;
font-family:华文隶书;text-align: center;
color: #000078;
font-weight: normal; margin: 0px auto;}
</style>
<style type="text/css">#items{animation: slider 0.26s linear infinite ;position: absolute;left:20%;text-align: center;z-index: 4;}
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>

<script id="lrc" type="text">
人生这趟旅途(Live 合唱版)-怪阿姨
词：喻笙音社
曲：黄文文
混音：喻笙音社@毅然音乐
编曲：喻笙音社@漠心藤
和声：黄文文
合唱：毅然合唱团
重制：喻笙音社@毅然音乐
制作人：黄文文/孙毅然
苦涩和心碎
只能自己背
谁会管你活得累不累
被生活的琐碎
折磨的不人不鬼
为了碎银几两夜不能寐
人生的这趟旅途
难逃命运的摆布
一路狼狈也一路孤独
都说吃得苦中苦
才能享尽福中福
可却难抵这现实的残酷
人生的这趟旅途
让我步步赴迷途
情难参悟也世事沉浮
都说没白走的路
也没有白吃的苦
可我怎没得到上天眷顾
人生的这一回
看不尽是与非
已过半生身边无人陪
生活鸡零狗碎
痴情也总换伤悲
能怪谁只是人心可谓
人生的这趟旅途
难逃命运的摆布
一路狼狈也一路孤独
都说吃得苦中苦
才能享尽福中福
可却难抵这现实的残酷
人生的这趟旅途
让我步步赴迷途
情难参悟也世事沉浮
都说没白走的路
也没有白吃的苦
可我怎没得到上天眷顾
人生的这趟旅途
难逃命运的摆布
一路狼狈也一路孤独
都说吃得苦中苦
才能享尽福中福
可却难抵这现实的残酷
人生的这趟旅途
让我步步赴迷途
情难参悟也世事沉浮
都说没白走的路
也没有白吃的苦
可我怎没得到上天眷顾
</script>
<script type="text/javascript">
var musicPlayer = function() {
return this.init.apply(this, arguments);
};
musicPlayer.prototype = {
constructor: musicPlayer,
init:function(options) {if(isEmptyObj(options) || typeof options !== 'object') return;
this.player = options.player;
this.lrc = options.lrc;
this.lrcArea = options.lrcArea;
//用于保存歌词
this.lrcArr = [];
//用于保存时间戳
this.timestamp = [];
//处理歌词
this.handleLrc(this.lrc);
var that = this;
this.player.addEventListener('play', function() {that.play();
}, false);
this.player.addEventListener('pause',function() {that.pause();
}, false);
//歌词索引
this.idx = 0;},
//格式化歌词
handleLrc:function(lrc) {
var re = /(\[.+\])(.+)?/gm,
ul = cEl('ul'),
frag = document.createDocumentFragment(),
tmpArr,i,len;
this.lrcArea.innerHTML = '';
frag.appendChild(ul);
ul.id = 'c';
this.lrcArea.appendChild(frag);
var        txt = lrc.replace(re,function(a,b,c) {
return b + (c === undefined ? '&nbsp;' : c) + '\n';});
tmpArr = txt.split('\n');
//处理歌词
for(i = 0,len = tmpArr.length; i < len; i++) {
var item = trim(tmpArr);
if(item.length > 0) {
this.lrcArr.push(item);}
}
frag = document.createDocumentFragment();
for(i = 0,len = this.lrcArr.length; i < len; i++) {
var li = cEl('li');
if(i === 0) {li.className = 'cur';}
li.innerHTML = this.lrcArr.replace(/\[.+\]/i,'')
.replace('','').replace('','');
//处理时间
this.timestamp.push(this.lrcArr.replace(re,function(a,b,c) {return b;
}).replace('[','').replace(']',''));
frag.appendChild(li);}
ul.appendChild(frag);
this.li = g('lrcArea').getElementsByTagName('li');},
//播放
play:function() {this.stop = false;
var that = this,
player = this.player,i,len;
this.t = setInterval(function() {if(that.stop) return;
that.curTime = player.currentTime;
for(i = 0,len = that.timestamp.length - 1; i < len; i++) {
var        prevTime = that.formatTimeStamp( that.timestamp ),
nextTime = that.formatTimeStamp( that.timestamp );
//当前播放时间与前后歌词时间比较，如果位于这两者之间则转到该歌词
if( parseFloat( that.curTime ) > prevTime && parseFloat( that.curTime ) < nextTime ) {
that.scrollToLrc(i);
return;}}},300);},
//暂停
pause:function() {this.stop = true;
clearInterval(this.t);},
//格式化时间
formatTimeStamp:function(timestamp) {
var re = /(+):(+)\.(+)/i,
seconds = timestamp.replace(re,function(a,b,c,d) {
return Number(b * 60) + Number(c) + parseFloat('0.'+ d);});
return seconds; },
//歌词滚动
scrollToLrc:function(idx) {
var ds = getOffset(this.li).top,i,len;
//如果歌词索引没有变动，则认为这句没有唱完，不处理
if(this.idx === idx) return;
//否则更新索引值并更新样式和位置
this.idx = idx;
for(i = 0,len = this.li.length; i < len; i++) {
this.li.className = '';}
this.li.className = 'cur';
this.lrcArea.scrollTop = ds - this.lrcArea.offsetHeight / 2;}};
function g(id) {return typeof id === 'string' ? document.getElementById(id) : id;}
function cEl(el) {return document.createElement(el);}
function trim(str) {return str.replace(/(^\s*)|(\s*$)/g, "");}
function isEmptyObj(o) {for(var p in o) return false;
return true;}
function getOffset(el) {var parent = el.offsetParent,
left = el.offsetLeft,
top = el.offsetTop;
while(parent !== null) {left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;}
return {left: left,top: top};}
var p = new musicPlayer({player: g('aud'),
lrc: g('lrc').innerHTML,lrcArea: g('lrcArea')});
</script>

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 移除存储的canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            // 透明度还原
            image.style.opacity = '';image1.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      // 尺寸
      var width = this.width, height = this.height;
      if (width && height) {
            // 存储之前的地址
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvas大小
            canvas.width = width;
            canvas.height = height;
            // 绘制图片帧（第一帧）
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            // 重置当前图片
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                // 跨域
                this.removeAttribute('src');
                // 载入canvas元素
                canvas.style.position = 'absolute';
                // 前面插入图片
                this.parentElement.insertBefore(canvas, this);
                // 隐藏原图
                this.style.opacity = '0';
                // 存储canvas
                this.storeCanvas = canvas;
            }
      }
    };
}
var image= document.getElementById("Img");
var image1= document.getElementById("picBtn");

mplayer.onclick =function() { aud.paused ? ( image.play(),image1.play(),aud.play()):(image.stop(),image1.stop(),aud.pause())};

items.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>items.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>items.style.animationPlayState = 'paused');
</script>

liumang 发表于 2023-12-4 19:59

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2023-12-8 13:41

换了音乐了{:5_150:}

查看完整版本: 人生这趟旅途(Live 合唱版)-怪阿姨