用 progress标签 做歌曲进度指示

起个网名好难

点击进度条启/停音乐

起个网名好难

1. <style>
   
2. #indicator{position:relative; width:100%; appearance: none; height:8px; overflow:hidden; border-radius: 8px;cursor:pointer;}
   
3. #indicator::-webkit-progress-bar        {background:pink;}
   
4. #indicator::-webkit-progress-value        {background:brown;}
   
5. </style>
   
6. <div style="min-height:100px;width:40%;margin:100px auto; ">
   
7. <audio id='music' src="https://music.163.com/song/media/outer/url?id=2071627608.mp3" loop autoplay ></audio>
   
8. <progress value='0' max='100' id='indicator'></progress>
   
9. <div>
   
10. 
    
11. <script>
    
12. music.addEventListener('timeupdate', () => {
    
13.         if(indicator)        {
    
14.                 indicator.value = music.currentTime / music.duration * 100;
    
15.         }
    
16. });
    
17. indicator.addEventListener('click',  () =>         {
    
18.         music.paused ? music.play() : music.pause();
    
19. });
    
20. </script>

复制代码

红影

这个可以完美暂停呢，难难厉害

红影

唯一的遗憾是不能调进度呢

起个网名好难

红影 发表于 2024-2-21 12:41
唯一的遗憾是不能调进度呢

正常欣赏音乐有多少调进度的需要？

起个网名好难

红影 发表于 2024-2-21 12:40
这个可以完美暂停呢，难难厉害

启停点歌词就行，这帖只是介绍进度条标签没歌词，其实这是可有可无。

红影

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

主要是习惯了，看到进度条就想拉一下

红影

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

嗯嗯，这个还挺好看的呢

起个网名好难

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

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

起个网名好难

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

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

红影

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

难难回自己编程，厉害的呢

红影

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

能够达到预期效果，也是成功

起个网名好难

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

胡乱划两句

红影

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

但是自己会，还是很了不起的事呢