|
|

楼主 |
发表于 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>
复制代码 |
|