起个网名好难 发表于 2024-2-21 10:58

用 progress标签 做歌曲进度指示

本帖最后由 起个网名好难 于 2024-2-21 10:58 编辑 <br /><br />点击进度条启/停音乐
<style>
#indicator{position:relative; width:100%; appearance: none; height:8px; overflow:hidden; border-radius: 8px;cursor:pointer;}
#indicator::-webkit-progress-bar        {background:pink;}
#indicator::-webkit-progress-value        {background:brown;}
</style>
<div style="min-height:100px;width:40%;margin:100px auto; ">
<audio id='music' src="https://music.163.com/song/media/outer/url?id=2071627608.mp3" loop autoplay ></audio>
<progress value='0' max='100' id='indicator'></progress>
<div>

<script>
music.addEventListener('timeupdate', () => {
        if(indicator)        {
                indicator.value = music.currentTime / music.duration * 100;
        }
});
indicator.addEventListener('click',() =>         {
        music.paused ? music.play() : music.pause();
});
</script>

起个网名好难 发表于 2024-2-21 10:58

<style>
#indicator{position:relative; width:100%; appearance: none; height:8px; overflow:hidden; border-radius: 8px;cursor:pointer;}
#indicator::-webkit-progress-bar        {background:pink;}
#indicator::-webkit-progress-value        {background:brown;}
</style>
<div style="min-height:100px;width:40%;margin:100px auto; ">
<audio id='music' src="https://music.163.com/song/media/outer/url?id=2071627608.mp3" loop autoplay ></audio>
<progress value='0' max='100' id='indicator'></progress>
<div>

<script>
music.addEventListener('timeupdate', () => {
        if(indicator)        {
                indicator.value = music.currentTime / music.duration * 100;
        }
});
indicator.addEventListener('click',() =>         {
        music.paused ? music.play() : music.pause();
});
</script>

红影 发表于 2024-2-21 12:40

这个可以完美暂停呢，难难厉害{:4_187:}

红影 发表于 2024-2-21 12:41

唯一的遗憾是不能调进度呢{:4_187:}

起个网名好难 发表于 2024-2-21 12:43

本帖最后由 起个网名好难 于 2024-2-21 12:47 编辑

红影 发表于 2024-2-21 12:41
唯一的遗憾是不能调进度呢
正常欣赏音乐有多少调进度的需要？

起个网名好难 发表于 2024-2-21 12:45

本帖最后由 起个网名好难 于 2024-2-21 12:46 编辑

红影 发表于 2024-2-21 12:40
这个可以完美暂停呢，难难厉害
启停点歌词就行，这帖只是介绍进度条标签没歌词，其实这是可有可无。

红影 发表于 2024-2-21 18:15

起个网名好难 发表于 2024-2-21 12:43
正常欣赏音乐有多少调进度的需要？

主要是习惯了，看到进度条就想拉一下{:4_173:}

红影 发表于 2024-2-21 18:15

起个网名好难 发表于 2024-2-21 12:45
启停点歌词就行，这帖只是介绍进度条标签没歌词，其实这是可有可无。

嗯嗯，这个还挺好看的呢{:4_187:}

起个网名好难 发表于 2024-2-21 18:22

红影 发表于 2024-2-21 18:15
主要是习惯了，看到进度条就想拉一下

那倒是，作为编程练习益处大一些。

起个网名好难 发表于 2024-2-21 18:23

红影 发表于 2024-2-21 18:15
嗯嗯，这个还挺好看的呢

因为只是显示进度，代码复杂程度就大大降低。

红影 发表于 2024-2-21 19:27

起个网名好难 发表于 2024-2-21 18:22
那倒是，作为编程练习益处大一些。

难难回自己编程，厉害的呢{:4_187:}

红影 发表于 2024-2-21 19:27

起个网名好难 发表于 2024-2-21 18:23
因为只是显示进度，代码复杂程度就大大降低。

能够达到预期效果，也是成功{:4_205:}

起个网名好难 发表于 2024-2-21 19:36

红影 发表于 2024-2-21 19:27
难难回自己编程，厉害的呢

胡乱划两句{:5_102:}

红影 发表于 2024-2-21 19:51

起个网名好难 发表于 2024-2-21 19:36
胡乱划两句

但是自己会，还是很了不起的事呢{:4_187:}
页: [1]
查看完整版本: 用 progress标签 做歌曲进度指示