论坛 › 欢乐水吧 › 《陪你千山万水(dj版)》樊少华&唐薇【老唱片更新】

亚伦影音工作室 发表于 2024-7-5 14:38

《陪你千山万水(dj版)》樊少华&唐薇【老唱片更新】

本帖最后由 亚伦影音工作室 于 2024-10-26 17:36 编辑 <br /><br /><style type="text/css">
#papa { margin: 140px 0 20px calc(50% - 781px); background:#880000 url('https://')no-repeat center/cover;width: 1400px; height: 700px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; }
#bjbs{animation: rotating 1s linear infinite;width: 1400px; height: 700px;position: absolute;background:url('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b3eb0e5b039583e5f6f0d847f0875f88.jpg')no-repeat center/cover; z-index: 2;transition: 1s; -webkit-mask-image: radial-gradient(black 25% ,transparent 75%) ; transform:scale(1);}
@keyframes rotating{50%{filter:hue-rotate(10deg)contrast(110%)brightness(150%);}}
#bjbs:hover { filter: brightness(1.2);filter: hue-rotate(0deg) drop-shadow(0 0 -40px cyan); transform:scale(1.4);}

#jpp{width: 100%; height:380px;position:absolute;z-index: 4;left: 0%;bottom: 0px;mix-blend-mode: lighten; }
#jpp img{ width: 100%; height: 100%;}
#bfq{position: absolute;
width: 400px;
height: 400px;top:100px; left:10px;z-index: 80;overflow: hidden;transform:translate(0%,0%)scale(.6);}
#vinyl{position: absolute;
        left:45px;
        bottom: 50px;
       animation: spin 8slinear infinite;
        display:flex;
        align-items:center;
        justify-content:center;
        width:250px;
        height:250px;
        border-radius:100%;transition: .5s;box-shadow: 0px 0px 0px 4px #000, 0px 0px 10px 6px #fff;
        background:linear-gradient(-45deg,#333,black,#aaa, black,#333);
cursor: pointer;
}
#vinyl:before,#vinyl:after{
        content:'';
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:repeating-radial-gradient(circle at center,#222 4px,transparent 8px);
        border-radius:50%;
}

.label{
        width:120px;
        height:120px;
        border-radius:100%;
        z-index:1;box-shadow: 0px 0px 0px 2px #000, 0px 0px 0px 2px #000;
        background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/b3eb0e5b039583e5f6f0d847f0875f88.jpg)no-repeat -50px 0px/cover;
       
}
.label:before{
        content:'';
        position:absolute;
        width:12px;
        height:12px;
        border-radius:100%;
        background-color: #fff;
        margin:auto;
        display:block;
        top:0;left:0;right:0;bottom:0;
}
@keyframes spin {to { transform: rotate(1turn); }}
#mplayer {position: absolute;
      top:30px; left:180px;z-index: 21;background: url('https://pic.imgdb.cn/item/65ffbbe89f345e8d036024a8.png')no-repeat center/150px 280px;
      width: 150px;
      height: 280px;
      cursor: pointer;
}
.pink { transform:rotate(-2deg);transform-origin: 85% 0%;}
.purple { transform-origin: 85% 0%;margin: 3px -10px;transform:rotate(-20deg);}
#tz { top:60px;left:1200px;width: 100px; height: 600px; z-index: 22; overflow: hidden; position: absolute; }
      #tz::before { content: attr(data-lrc); position: absolute; left: 20px; top: 0px; width: 80px; height: 100%; writing-mode: vertical-rl; font: normal 40px/90px 微软雅黑; color: transparent; background: repeating-linear-gradient(to bottom, gold, lightgreen, snow, lightgreen, orange) 50%/80px 200px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}

</style>
<div id="papa">
<div id="bjbs"> </div>
<div id="jpp"><img id="Img" src="https://pic.imgdb.cn/item/66548c78d9c307b7e9a466eb.gif" alt="" /></div>
<div id="tz" data-lrc="别让眼泪把我灌醉 - 魏佳艺"></div>
<div id="bfq"><div id="mplayer" class="pink"title="暂停/播放" ></div>
<div id="vinyl" title="暂停/播放">
        <div class="label"></div>
</div>
</div>
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/aa/86/1c/0b67d75bfbc0fd65f67e601491c458ef/audio.mp3" autoplay loop></audio>
    <script>
mplayer.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop()));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
vinyl.addEventListener('click', () => aud.paused ? (aud.play(),mplayer.classList.remove('purple'),image.play()) : (aud.pause(),mplayer.classList.add('purple'),image.stop()));

vinyl.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>vinyl.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>vinyl.style.animationPlayState = 'paused');

bjbs.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>bjbs.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>bjbs.style.animationPlayState = 'paused');
</script>
<script>
var curkey = 0, lrcAr = [];
var getAr = (text) => {
    var ar = text.trim().split('\n');
    ar.sort();
    var reg = /\[(\d+)[.:](\d+)[.:](\d+)\](.*)/;
    ar.forEach(item => {
      let result = item.match(reg);
      let tmsg = parseInt(result) * 60 + parseInt(result) + parseInt(result) / 1000;
      lrcAr.push(.trim()]);
    });
};
var mState = () => {
    tz.style.setProperty('--state', ['running','paused'][+aud.paused]);

    //其它控制代码
};
aud.onseeked = () => curkey = 0;
aud.onplaying = aud.onpause = () => mState();
aud.ontimeupdate = () => {
    if(curkey > lrcAr.length - 1) return;
    if(aud.currentTime >= lrcAr) {
      tz.dataset.lrc = lrcAr;
      curkey ++;
    }
};

var lrc = `陪你千山万水 (DJ何鹏版) - 樊少华&唐薇
词：樊少华
曲：樊少华
（未经许可,不得翻唱或使用）
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
女：
微微的风儿 轻轻吹
吹的我呀心儿醉
男：
一路美景有你陪
远行万里也不觉累
女：
满山的花儿 那么美
蝴蝶起舞翩翩飞
男：
一路幸福的滋味
只因有你在相随
女：
我陪你呀跨千山
男：
我陪你呀走万水
合：
紧紧牵着你的手
无论天亮到天黑
女：
我陪你呀走西东
男：
我们一起闯南北
合：
只要陪在你身边
今生我决不后悔
`;
getAr(lrc);
</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 = '';
      }
      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");
</script>

梦油 发表于 2024-7-5 15:00

欣赏佳作，问候亚伦。

红影 发表于 2024-7-5 17:40

漂亮变色音画，鼠标触碰人物后，会变大。
很巧妙的制作效果，欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-7-5 17:42

变色最好别在人物脸上有变化，好好的美人儿，嘴唇变蓝色了，太影响人家颜值了{:4_173:}

红影 发表于 2024-7-5 17:43

变色频率和音乐节拍很一致，非常赞。{:4_199:}
那频谱很奇怪，点击后变成不是条状而是线状了呢。{:4_203:}

老谟深虑 发表于 2024-7-5 18:24

         欣赏老师的佳作，这个代码在离退休论坛同步歌词不显示。

小辣椒 发表于 2024-7-5 21:57

亚伦也是把这个播放器指针换了，我还是喜欢你那个白的，竖的歌词我还是这个意思，换横的，这个歌词长用不了。。。。。。

小辣椒 发表于 2024-7-5 21:58

变色特效漂亮的，播放器好像也是改小了一点，是我那个尺寸吗？

小辣椒 发表于 2024-7-5 21:59

欣赏亚伦的精彩制作，亚伦每个帖都会有新的创意{:4_199:}

亚伦影音工作室 发表于 2024-7-5 22:49

小辣椒 发表于 2024-7-5 21:59
欣赏亚伦的精彩制作，亚伦每个帖都会有新的创意

这个是双项控制，胶片和指针都能控制！

查看完整版本: 《陪你千山万水(dj版)》樊少华&唐薇【老唱片更新】