时间机器

马黑黑 发表于 2024-11-19 08:10

马黑黑 发表于 2024-11-19 08:32

本帖最后由马黑黑于 2024-11-19 08:40 编辑

audio.js 模块简介：

该模块主要用于管理音频及音频暂停、播放时与CSS动画、视频、svg动画的联动，目前测试中

模块引用：

第一，页内JS代码流中 <script> 标签需要 type="module"（参考帖子 14 行代码）；
第二，import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js';

红紫色的 Aud 是模块固定的对外开放的名称

帖子针对模块的变量配置：使用JS Object对象表示，即花括号里一系列键值对组合——

var config = {
pa: mama, /* 帖子容器id */
aud: aud, /* 音频id */
btn: msvg, /* 按钮id */
cssval: '--run' /* CSS变量（控制CSS动画的变量名称，本帖是 --run，以前咱们用的是 --state，都可以） */
};

红色部分是健名，固定的名称，不能更改；它们的右边是键值，根据帖子的情况给出相应元素名称（看注释）。以上配置语句可以写在一行（参考帖子代码 19 行）

最后是实例化模块：

let audio = new Aud(config); /* 自定义一个名称实例化模块提供的对象，注意提供的参数是前面自定义的配置名称 */
audio.play(); /* 运行模块全部功能 */

蓝色部分，audio 是自己定好的名称，啥都行，就是先创建一个实例化，实例化的东东得有个名称，然后，用这个名称去运行 play() 就好了。

帖子中，视频、svg动画，如果有，模块都会对之进行与音频联动的管控

马黑黑 发表于 2024-11-19 08:10

<h2>帖子代码：</h2>
<div id="hEdiv"><pre id="hEpre">
<style>
#mama { margin: 30px 0 30px calc(50% - 601px); width: 1200px; height: 700px; background: black url('https://638183.freep.cn/638183/small/time.jpg') no-repeat center/ 400px 400px; box-shadow: 3px 3px 6px gray; z-index: 1; display: grid; place-items: center; position: relative; --run: running; }
#msvg { position: absolute; top: calc(50% - 155px); width: 300px; height: 300px; cursor: pointer; animation: rot 8s linear infinite var(--run); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mama">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=436355180"></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/23/08/29/17/03/04/video64edb448b4da6.mp4" autoplay loop muted></video>
<svg id="msvg"></svg>
</div>

<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audio.js';

var dr = draw.dr('msvg');
var mDatas = { pa: mama, aud: aud, btn: msvg, cssval: '--run' };

let audio = new Aud(mDatas);
audio.play();

var tt = 9, R = 150, r = 140, a = 360 / tt, rad = Math.PI / 180 * a, pstr = 'M150 150';
for(var i = 0; i <= tt; i ++) {
var x1 = R + r * Math.cos(rad * i), x2 = R + r * Math.cos(rad * (i + 1)),
y1 = R + r * Math.sin(rad * i), y2 = R + r * Math.sin(rad * (i + 1));
pstr += `L${x1.toFixed(2)} ${y1.toFixed(2)} Q150 150,${x2.toFixed(2)} ${y2.toFixed(2)} L150 150`;
}
dr.marker('m1', 5, 5, 2.5, 2.5);
dr.circle(2.5,2.5,2.5,'red').addTo('m1');
dr.path(pstr, 'rgba(20,20,100,.3)', 'red', 2).sets({'marker-mid': 'url(#m1)', 'stroke-dasharray': '4 8'}).animate('animate', {
attributeName: 'stroke-dashoffset',
to: 300,
dur: '4s',
repeatCount: 'indefinite'
});
</script>
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script>

梦江南 发表于 2024-11-19 08:13

哇，好好酷！{:4_199:}

梦江南 发表于 2024-11-19 08:14

早上问好，谢谢老师辛苦！{:4_190:}

愤怒的葡萄 发表于 2024-11-19 08:25

真的好酷啊。

秋思梦景 发表于 2024-11-19 09:02

问候老师好!精美代码音画佳作，精心设计组合。为您点赞！{:4_187:}{:5_116:}{:5_116:}

朵拉发表于 2024-11-19 10:12

这明明是时间隧道嘛~~{:4_178:}

醉美水芙蓉 发表于 2024-11-19 11:41

马黑黑 发表于 2024-11-19 12:15

醉美水芙蓉发表于 2024-11-19 11:41
老师这个播放器真漂亮！

{:4_190:}

马黑黑 发表于 2024-11-19 12:15

朵拉发表于 2024-11-19 10:12
这明明是时间隧道嘛~~

{:4_181:}

马黑黑 发表于 2024-11-19 12:16

秋思梦景发表于 2024-11-19 09:02
问候老师好!精美代码音画佳作，精心设计组合。为您点赞！

{:4_191:}

马黑黑 发表于 2024-11-19 12:16

愤怒的葡萄发表于 2024-11-19 08:25
真的好酷啊。

{:4_180:}

花飞飞 发表于 2024-11-19 18:59

矮油，我还看到了升级版。。
这个跟我站里的一样。没有线型进度条。。。。{:4_173:}

花飞飞 发表于 2024-11-19 19:08

马黑黑发表于 2024-11-19 08:32
audio.js 模块简介：

该模块主要用于管理音频及音频暂停、播放时与CSS动画、视频、svg动画的联动，目前 ...

这个音频管理视频，各种动画，这个控制也封起来了，用起来岂不是更简单。。。
天哪，以后就不用管JS控制动画部分了。。
简直是普天同庆的好日子{:4_170:}

花飞飞 发表于 2024-11-19 19:11

让做贴子变得更简单。。。
白老师你真是音画爱好者的大福星。。

这个画面进来后看到的真是震撼，
先说色彩。。小播使用了中国红，堂堂正正，正气凛然。。太迷人了，很是喜欢。。

花飞飞 发表于 2024-11-19 19:14

背景图片居然只有一张圆形类似时间一样的机器图。。。
400*400，别的地方黑色填充。。用放射状的视频全贴覆盖。。。

小播的线条动态与视频动态一起形成时间隧道效果，赞叹，好看。。

花飞飞 发表于 2024-11-19 19:15

这个贴子技术含量太高，理程碑式的。。{:4_191:}值得庆贺一番。。

马黑黑 发表于 2024-11-19 19:23

花飞飞发表于 2024-11-19 19:15
这个贴子技术含量太高，理程碑式的。。值得庆贺一番。。

里程碑？有这么严重吗{:4_170:}

马黑黑 发表于 2024-11-19 19:24

花飞飞发表于 2024-11-19 19:14
背景图片居然只有一张圆形类似时间一样的机器图。。。
400*400，别的地方黑色填充。。用放射状的视频全贴 ...

这个设计得分吧

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

时间机器