亚伦影音工作室 发表于 2024-12-1 19:09

频谱小播

本帖最后由 亚伦影音工作室 于 2024-12-2 01:59 编辑 <br /><br />    <style type="text/css">#pa{width: 300px;height: 150px;
                        position: relative;margin: 10px 0 20px calc(50% - 221px);background:#0000 }
   .containe{ position: absolute;   
                        height: 60px;left:35%;
                        cursor: pointer;bottom: 40px;}
                       #one{animation:yuying1 0.6s infinite 0.1s;}
                       #two{animation:yuying1 0.6s infinite 0.3s;}
                       #three{animation:yuying1 0.6s infinite 0.5s;}
                        #four{animation:yuying1 0.6s infinite 0.7s;}
                        #five{animation:yuying1 0.6s infinite 0.9s;}
         #six{animation:yuying1 0.6s infinite 1.1s;}
             #seven{animation:yuying1 0.6s infinite 1.3s;}
                #even{animation:yuying1 0.6s infinite 1s;}       
                        .wave{
                                width:5px;
                                height: 100%;
                                margin-left: 4px;
                                border-radius: 20px;
                                background-color: #ff0000;
                                vertical-align: middle;
                                display: inline-block;}
.stop #even,.stop #seven,.stop #six,.stop #five,.stop #four,.stop #three,.stop #two,.stop #one {animation-play-state: paused;}
@keyframes yuying1{
                                 0%{height: 10%;}
                                20%{height: 50%;}
                                50%{height: 100%;}
                                80%{height: 50%;}
                                100%{height: 2%;}
                           }       
#tmsg {position: absolute;z-index: 8;
      font: normal 12px sans-serif;
      color: #000;
         bottom: 8px;
      left:38%;}
        </style>
<divid="pa">
        <div id="tmsg">正在计时......</div>
                <div class="containe" id="testImg">
                         <div id="one" class="wave"></div>
                        <div id="two" class="wave"></div>
                        <div id="three" class="wave"></div>
                        <div id="four" class="wave"></div>
                        <div id="five" class="wave"></div>
                        <div id="six" class="wave"></div>
                        <div id="seven" class="wave"></div>
                        <div id="even" class="wave"></div>
                </div>
               </div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/8d/bd/2b/469f87fed5a0bc1a2816905294741577/audio.mp3" loop="loop" autoplay="autoplay"></audio>
<script>
testImg.onclick = () => aud.paused ? (aud.play(),image.classList.remove('stop')): (aud.pause(),image.classList.add('stop'));
var image= document.getElementById("testImg");
aud.addEventListener('timeupdate', () => {
                tmsg.innerText = toMin(aud.currentTime) + ' / ' + toMin(aud.duration);});
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 ;
      };
</script>
   

红影 发表于 2024-12-1 19:29

这个还是代码制作的小频谱，很漂亮，还能点击暂停。
这个制作真棒，感谢亚伦老师带来的好帖{:4_187:}

小辣椒 发表于 2024-12-1 21:59

亚伦这个小播要这么多代码，制作辛苦的{:4_187:}

杨帆 发表于 2024-12-1 23:03

漂亮！谢谢亚伦老师精彩分享{:4_191:}

老谟深虑 发表于 2024-12-2 18:27

         感谢老师的制作，好棒！
页: [1]
查看完整版本: 频谱小播