css-doodle音频播放控制器应用实例

马黑黑 发表于 2023-5-11 22:23

本帖最后由马黑黑于 2023-5-11 22:25 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 531px);width: 900px;height: 559px;background: tan url('https://638183.freep.cn/638183/t23/1/yujb.jpg');box-shadow: 0 0 8px #000;display: grid;place-items: center;position: relative;}</style>

<div id="papa">
<css-doodle id="mplayer">
:doodle {@grid: 2 / 300px 60px;position: absolute;color: var(--color);bottom: 0;--prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;}
@nth(1) {@place: 25% 80%;:after { content: var(--ttmsg1); }}
@nth(2) {@size: var(--size);@shape: windmill;@place: 50% 35%;background: var(--color);animation: rot 6s infinite linear var(--state);}
@nth(3) {@place: 75% 80%;:after { content: var(--ttmsg2); }}
@nth(4) {@place: 50% 80%;@size: 100% 2px;background: #bbb;display: grid;place-items: center start;:before {content: '';width: var(--prog);height: 100%;background: var(--color);}}
@keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=16964082" autoplay loop></audio>
</div>

<script>
(function() {
let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)});
mplayer.onclick = () => {if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();if(clickIdx === 2) aud.currentTime = progChg;}
mplayer.onmousemove = (e) => {let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);mplayer.style.cursor = cursors;if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;}
})();
</script>

马黑黑 发表于 2023-5-11 22:26

本帖最后由马黑黑于 2023-5-11 22:38 编辑

帖子源码
<style>
#papa {
   margin: auto;
   width: 900px;
   height: 559px;
   background: tan url('../pic/yujb.jpg');
   box-shadow: 0 0 8px #000;
   display: grid;
   place-items: center;
   position: relative;
}
</style>

<div id="papa">

<css-doodle id="mplayer">
   :doodle {
            @grid: 2 / 300px 60px;
            position: absolute;
            color: var(--color);
            bottom: 0;
            --prog: 0%; --size: 40px; --ttmsg1: '00:00'; --ttmsg2: '00:00'; --color: lightgreen; --state: paused;
   }
   /* 时间信息 : 左 */
   @nth(1) {
            @place: 25% 80%;
            :after { content: var(--ttmsg1); }
   }
   /* 控制器 */
   @nth(2) {
            @size: var(--size);
            @shape: windmill;
            @place: 50% 35%;
            background: var(--color);
            animation: rot 6s infinite linear var(--state);
   }
   /* 时间信息 : 右 */
   @nth(3) {
            @place: 75% 80%;
            :after { content: var(--ttmsg2); }
   }
   /* 进度条 */
   @nth(4) {
            @place: 50% 80%;
            @size: 100% 2px;
            background: #bbb;
            display: grid;
            place-items: center start;
            :before {
                     content: '';
                     width: var(--prog);
                     height: 100%;
                     background: var(--color);
            }
   }
   @keyframes rot { to { transform: rotate(1turn); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=16964082" autoplay loop></audio>

</div>

<script>
(function() {
   let clickIdx = 0, progChg = 0, cursors = ['default','pointer','pointer'];
   let script = document.createElement('script');
   script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
   document.head.appendChild(script);
   let toMin = (val) => {if (!val) return '00:00';val = Math.floor(val);let min = parseInt(val / 60), sec = parseFloat(val % 60);if (min < 10) min = '0' + min;if (sec < 10) sec = '0' + sec;return min + ':' + sec;};
   let mState = () => mplayer.style.setProperty('--state', aud.paused ? 'paused' : 'running');
   aud.addEventListener('play', mState, false);
   aud.addEventListener('pause', mState, false);
   aud.addEventListener('timeupdate', () => {
            mplayer.style.setProperty('--ttmsg1', `'${toMin(aud.currentTime)}'`);
            mplayer.style.setProperty('--ttmsg2', `'${toMin(aud.duration)}'`);
            mplayer.style.setProperty('--prog',`${100 * aud.currentTime / aud.duration}%`)
   });

   mplayer.onclick = () => {
            if(clickIdx === 1) aud.paused ? aud.play() : aud.pause();
            if(clickIdx === 2) aud.currentTime = progChg;
   }
   mplayer.onmousemove = (e) => {
            let size = parseInt(window.getComputedStyle(mplayer).getPropertyValue('--size')), ww = mplayer.offsetWidth, hh = mplayer.offsetHeight;
            clickIdx = e.offsetY > hh/1.5 ? 2 : (e.offsetX > (ww - size)/2 && e.offsetX < (ww + size)/2 && e.offsetY < hh/1.5 ? 1 : 0);
            mplayer.style.cursor = cursors;
            if(clickIdx > 1) progChg = aud.duration * e.offsetX / ww;
   }
})();
</script>

亦是金 发表于 2023-5-11 22:27

黑黑老师上实例了，欣赏学习中！{:4_190:}

亦是金 发表于 2023-5-11 22:29

先收藏，慢慢捣鼓！{:5_111:}

马黑黑 发表于 2023-5-11 22:35

JS部分更改了一些算法，主要针对播放控制器。其中：

变量 clickIdx 是单击索引、progChg 是改变当前播放时间值、cursors 是鼠标指针数组。

脚本依据鼠标指针在 css-doodle 上的位置算出 clickIdx 值，分别为 0（不触发任何事件，指针默认）、1（触发播放暂停，指针手型）、2（触发播放进度的更改，指针手型）。

算法主要在css-doodle界面的鼠标滑过事件中进行计算。

马黑黑 发表于 2023-5-11 22:36

亦是金发表于 2023-5-11 22:29
先收藏，慢慢捣鼓！

此例，播放器是独立的 css-doodle，可以将css-doodle视为一个HTML元素

马黑黑 发表于 2023-5-11 22:37

亦是金发表于 2023-5-11 22:27
黑黑老师上实例了，欣赏学习中！

感谢

红影发表于 2023-5-11 22:38

这个和那个《css-doodle播放控制器》还是不一样的，就算比较了，该不懂的地方一样不懂{:4_173:}

红影发表于 2023-5-11 22:39

这个挺好看的，而且能调进度，真棒{:4_199:}

马黑黑 发表于 2023-5-11 22:39

红影发表于 2023-5-11 22:38
这个和那个《css-doodle播放控制器》还是不一样的，就算比较了，该不懂的地方一样不懂

这个JS代码可能更抽象一些

小辣椒 发表于 2023-5-11 22:41

这个JS效果的播放器很漂亮了{:4_178:}

小辣椒 发表于 2023-5-11 22:41

黑黑你真的无所不能{:4_178:}

小辣椒 发表于 2023-5-11 22:42

发现JS 很难，小辣椒只能套用，自己修改还是不会

马黑黑 发表于 2023-5-11 22:43

小辣椒发表于 2023-5-11 22:42
发现JS 很难，小辣椒只能套用，自己修改还是不会

JS可以很容易，也可以很难

亦是金 发表于 2023-5-11 22:54

马黑黑发表于 2023-5-11 22:36
此例，播放器是独立的 css-doodle，可以将css-doodle视为一个HTML元素

好的！谢谢老师！{:4_190:}

亦是金 发表于 2023-5-11 22:58

马黑黑发表于 2023-5-11 22:37
感谢

谢谢老师详细的教程，得慢慢学习体会运用！{:4_190:}

马黑黑 发表于 2023-5-11 22:58

亦是金发表于 2023-5-11 22:58
谢谢老师详细的教程，得慢慢学习体会运用！

{:4_191:}

马黑黑 发表于 2023-5-11 22:58

亦是金发表于 2023-5-11 22:54
好的！谢谢老师！

{:4_176:}

小辣椒 发表于 2023-5-11 23:00

马黑黑发表于 2023-5-11 22:43
JS可以很容易，也可以很难

但我感觉用眼有点厉害，现在我都不仔细看代码，眼睛不是很好

马黑黑 发表于 2023-5-11 23:35

小辣椒发表于 2023-5-11 23:00
但我感觉用眼有点厉害，现在我都不仔细看代码，眼睛不是很好

那就少玩一点吧

页: [1] 2 3

花潮论坛's Archiver

css-doodle音频播放控制器应用实例