论坛 › 音乐沙龙 › Josh Vietti : Toccata

马黑黑 发表于 2025-8-9 07:28

Josh Vietti : Toccata

本帖最后由 马黑黑 于 2025-8-9 08:33 编辑 <br /><br /><style>
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/tocc.jpeg') no-repeat center/cover; --ma-size: 15%; }
        #ma { right: 30px; top: 30px; display: grid; place-items: center; }
        .son { position: absolute; width: 50%; height: 100%; }
        .son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/small/2025/tocc.webp') no-repeat center/cover; clip-path: polygon(0 0,50% 50%,100% 0, 50% 15%,0 0); transform: scale(1) translateY(5px); }
        .son::after { transform: scale(1, -1) translateY(5px); }
        .son:nth-of-type(2) { transform: rotate(90deg); }
        #btnFs { left: 30px; top: 30px; color: #fff; }
        #pic, #canv { position: absolute; bottom: 0; cursor: pointer; }
</style>

<div id="pa">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1606119" autoplay loop></audio>
        <video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/02/34/5b56bc45c5d1e.mp4" autoplay loop muted></video>
        <div id="ma" class="invert">
                <div class="son"></div>
                <div class="son"></div>
        </div>
        <img id="pic" src="https://638183.freep.cn/638183/t22/gif/jigu.gif" alt="" />
        <canvas id="canv" width="200" height="200"></canvas>
</div>

<script type="module">
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        FS(pa, ma);
        const ctx = canv.getContext('2d');
        ctx.drawImage(pic, 0, 0, 200, 200);
        const mState = () => {
                if (aud.paused) {
                        canv.style.opacity = 1;
                        pic.style.opacity = 0;
                } else {
                        canv.style.opacity = 0;
                        pic.style.opacity = 1;
                }
        };
        aud.onplaying = aud.onpause = () => mState();
        canv.onclick = () => ma.click();
        canv.title = ma.title;
</script>

马黑黑 发表于 2025-8-9 07:32

本帖最后由 马黑黑 于 2025-8-9 08:33 编辑 <br /><br /><div class="codebox" data-title="帖子代码">
&lt;style&gt;
        @import 'https://638183.freep.cn/638183/web/css/tz01.css';
        #pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/6/tocc.jpeg') no-repeat center/cover; --ma-size: 15%; }
        #ma { right: 30px; top: 30px; display: grid; place-items: center; }
        .son { position: absolute; width: 50%; height: 100%; }
        .son::before, .son::after { position: absolute; content: ''; width: 100%; height: 100%; background: url('https://638183.freep.cn/638183/small/2025/tocc.webp') no-repeat center/cover; clip-path: polygon(0 0,50% 50%,100% 0, 50% 15%,0 0); transform: scale(1) translateY(5px); }
        .son::after { transform: scale(1, -1) translateY(5px); }
        .son:nth-of-type(2) { transform: rotate(90deg); }
        #btnFs { left: 30px; top: 30px; color: #fff; }
        #pic, #canv { position: absolute; bottom: 0; cursor: pointer; }
&lt;/style&gt;

&lt;div id="pa"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1606119" autoplay loop&gt;&lt;/audio&gt;
        &lt;video class="pd-vid" src="https://img.tukuppt.com/video_show/2402760/00/02/34/5b56bc45c5d1e.mp4" autoplay loop muted&gt;&lt;/video&gt;
        &lt;div id="ma" class="invert"&gt;
                &lt;div class="son"&gt;&lt;/div&gt;
                &lt;div class="son"&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;img id="pic" src="https://638183.freep.cn/638183/t22/gif/jigu.gif" alt="" /&gt;
        &lt;canvas id="canv" width="200" height="200"&gt;&lt;/canvas&gt;
&lt;/div&gt;

&lt;script type="module"&gt;
        import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
        FS(pa, ma);
        const ctx = canv.getContext('2d');
        ctx.drawImage(pic, 0, 0, 200, 200);
        const mState = () =&gt; {
                if (aud.paused) {
                        canv.style.opacity = 1;
                        pic.style.opacity = 0;
                } else {
                        canv.style.opacity = 0;
                        pic.style.opacity = 1;
                }
        };
        aud.onplaying = aud.onpause = () =&gt; mState();
        canv.onclick = () =&gt; ma.click();
        canv.title = ma.title;
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-9 07:53

小播构图：

      给 #ma 添加两个子元素 .son，子元素通过两个伪元素造型，两个伪元素使用相同的背景和 clip-path 相同的多边形切割方式，第二个伪元素通过 scale() 函数将其朝向设置为与第一个伪元素的朝向相反；第二个子元素旋转90度。

小鼓手：

      正儿八经的鼓手使用 canvas+img 组建，即，一个 canvas 画布，一个 img 标签。img标签装载的是一张 .gif 动图，canvas 画布上绘制源来自 img 标签。canvas 不能绘制 .gif 的所有帧，只能画出第一帧，因此用它来表现音乐暂停时的鼓手状态（有些差强人意，动图复杂的话斜街会露马脚）。两个元素重叠在一起，使用 opacity 属性设置是否呈现，处理机制在JS中完成。

鼓手和 ma 一样具备点击控制音频播放暂停功能，可以点击小鼓手看看。这一部分的绑定通过canvas标签实现，因为 canvas 在代码流中最后出现因而它的 z-index 层级比 img 标签高，即使在它的透明度为 0 的时候。

* 再次提一下：帖子中有一个 mState() 函数，与模块 FS 封装的函数名一模一样；同时，帖子也和模块一样监听 audio 标签的 playing 和 pause 事件。这在模块引入到JS以前是不可以实现的：同名函数非法、事件只能监听一次。ES 模块的好处在于，模块是封闭的，它处于与“世”隔离的状态但又能操纵世界同时大度地允许现实世界对现实世界的操作。

马黑黑 发表于 2025-8-9 07:55

josh vietti是一位乐观，热情极具个人魅力的年轻音乐家，他出生于美国加州，4岁就开始学习小提琴（不知道是不是参加课外的兴趣班——周末的或寒暑期的），并在2006年由于对音乐的狂热，josh开创了自己的事业。最初他在美国的Santa Monica（圣塔莫尼卡）第三St. Promenade大道做街头表演，并且由此卖出了15000张CD唱片。后来被著名的歌手Brian Kennedy (Rihanna, Chris Brown, Jennifer Hudson) 和 Kashif (Whitney Houston & Kenny G)发现，并邀请他在他们的现场音乐会上演出，而后在工作室中为他录制音乐。

马黑黑 发表于 2025-8-9 07:58

帖子中的男子并非 josh vietti 本人哈，是本尊。图文无关，随意灌水{:4_173:}

花飞飞 发表于 2025-8-9 08:12

刚才先用的手机点击鼓手，可以控停，且鼓手也暂停，能看到暂停状态。。
现在用电脑，同样点击鼓手，它立刻隐身了。点小播暂停时，鼓手也隐身。。这是一个不同之处

花飞飞 发表于 2025-8-9 08:18

小播裁好之后先是用1.-1整出个头对头，再整体旋转90度成四个的。。
这次小播背景用的是紫白圈的图片。

花飞飞 发表于 2025-8-9 08:21

鼓手一脸懵，起太早被迫营业，闭着眼在敲。。。{:4_170:}昨天的小猫是点击了才出来，这个是点击才隐身
音乐着实好听，旋律高昂欢快，悦耳动听

花飞飞 发表于 2025-8-9 08:25

马黑黑 发表于 2025-8-9 07:58
帖子中的男子并非 josh vietti 本人哈，是本尊。图文无关，随意灌水

这个是你本尊啊，只有黑乎乎有点像。。
坐姿标准，小提琴拉得真好。。这眼镜是新配的吧{:4_173:}

马黑黑 发表于 2025-8-9 08:36

花飞飞 发表于 2025-8-9 08:12
刚才先用的手机点击鼓手，可以控停，且鼓手也暂停，能看到暂停状态。。
现在用电脑，同样点击鼓手，它立刻 ...
估计是与 canvas 画布 drawImage 参数没用完有关：此前我没有指定后两个宽高参数。现在已经修正，火狐、百分、刀锋都试过了，可以。刷新一下。

马黑黑 发表于 2025-8-9 08:36

花飞飞 发表于 2025-8-9 08:18
小播裁好之后先是用1.-1整出个头对头，再整体旋转90度成四个的。。
这次小播背景用的是紫白圈的图片。

对。能整明白代码，老厉害了

马黑黑 发表于 2025-8-9 08:37

花飞飞 发表于 2025-8-9 08:21
鼓手一脸懵，起太早被迫营业，闭着眼在敲。。。昨天的小猫是点击了才出来，这个是点击才隐身
音 ...

{:4_190:}

马黑黑 发表于 2025-8-9 08:45

花飞飞 发表于 2025-8-9 08:25
这个是你本尊啊，只有黑乎乎有点像。。
坐姿标准，小提琴拉得真好。。这眼镜是新配的吧

黑是俺的本色。

坐姿得益于在砖厂锯柴火三个月的工作。你懂的，音乐来源于生活，小提琴的发明与锯木头有关（详情请参考赵本山的小品）。既然俺对大中小提琴有着浓厚的兴趣，家人就安排俺去砖厂上班，专锯柴火。老师傅教俺，锯好柴火，得站如松坐如钟行如风卧如弓食如疯。俺遵照老师傅的教导，这就练出了一身正气。

眼镜嘛，是装装门面：俺文化少，斯文感得借助外物，粉丝深谙此理，纷纷捐献各种平光眼镜以装饰门面。一年四季天天换眼镜，十年内保证不会重复戴。

花飞飞 发表于 2025-8-9 09:20

马黑黑 发表于 2025-8-9 08:45
黑是俺的本色。

坐姿得益于在砖厂锯柴火三个月的工作。你懂的，音乐来源于生活，小提琴的发明与锯木头 ...

你这经历可以写一本传记，
业余爱好除了杀猪写代码修手表教跳舞还加上了锯木头。。从业经历之丰富实属罕见。。
天天写代码居然 不近视，太不科学了{:4_170:}

花飞飞 发表于 2025-8-9 09:21

马黑黑 发表于 2025-8-9 08:37


我看看这大清早的上的啥养生茶。。。红枣黄芪枸杞党参{:4_173:}

花飞飞 发表于 2025-8-9 09:30

马黑黑 发表于 2025-8-9 08:36
对。能整明白代码，老厉害了

小白看懂是偶尔，这一不小心就看明白了一丢丢{:4_173:}

花飞飞 发表于 2025-8-9 09:33

马黑黑 发表于 2025-8-9 08:36
估计是与 canvas 画布 drawImage 参数没用完有关：此前我没有指定后两个宽高参数。现在已经修正，火狐、 ...
ctx.drawImage(pic, 0, 0, 200, 200);
28行这里加了200，威力巨大，厉害。。

现在控停之后图片可以暂停了。你咋这么神涅。。

红影 发表于 2025-8-9 09:58

马黑黑 发表于 2025-8-9 08:45
黑是俺的本色。

坐姿得益于在砖厂锯柴火三个月的工作。你懂的，音乐来源于生活，小提琴的发明与锯木头 ...

“站如松、坐如钟、行如风、卧如弓、食如疯。”哈哈，前面四个都听过，最后的食如疯没听过{:4_173:}
小提琴和锯木头有关，嗯，长见识了，不过姿势真的很像呢{:4_196:}

红影 发表于 2025-8-9 10:01

这个好，有gif 动图的控制方法。记得以前也教过，忘记了，懒得去找了。下回用这个就好。而且这还能控制音乐，这个控制音乐还和封装里的控制不打架，这个太好了{:4_199:}

红影 发表于 2025-8-9 10:04

小播的制作也很有特色，做一个，映射一个，再把这俩一起转90度弄出4个来。
小播的背景也漂亮，触碰选了class="invert" ，色彩变化很大。{:4_187:}

查看完整版本: Josh Vietti : Toccata