马黑黑 发表于 2022-5-19 20:09

采茶舞曲（民歌串串烧·车载音乐）

<style>
.wrap {
       left: -70px;
        width: 900px;
        height: 600px;
        background: teal url('/data/attachment/forum/202205/19/200454kk2dh4429i8d2v44.jpg') no-repeat center/cover;
        position: relative;
}
.progress {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        left: 7%;
        top: 50%;
        border-radius: 50%;
        background: conic-gradient(from 180deg,red 0%,seagreen 0%);
        cursor: pointer;
}

.progress::before {
        position: absolute;
        content: attr(data-per);
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background: lightseagreen;
        text-align: center;
        font: normal 15px / 90px sans-serif;
}

</style>

<div class="wrap">
        <div class="progress" data-per="0%"></div>
        <audio id="aud" src="http://www.kumeiwp.com/sub/filestores/2022/05/17/ffcdb94643300274543c5937c0c3d840.mp3" loop="loop" autoplay="autoplay"></audio>
</div>

<script>

let progress = document.querySelector('.progress');
let aud = document.querySelector('#aud');
let current, task;

aud.addEventListener('timeupdate', function(){
        task = aud.duration;
        current = aud.currentTime;
        setProgress(task,current);
});

progress.onclick = () =>{
        aud.paused ? aud.play() : aud.pause();
};

function setProgress(tt,cc) {
        if(tt <= 0 || cc <= 0) return false;
        let prog = 100 * cc / tt;
        progress.style.background = `conic-gradient(from 180deg,red ${prog}%,seagreen ${prog}%)`;
        progress.setAttribute('data-per', prog.toFixed(2) + '%');
}

</script>

梦油 发表于 2022-5-19 20:26

听着很过瘾，我停止了所有的事情，躺在安乐椅上欣赏着黑黑朋友提供的中国民歌串串烧。品着香茶，听着民歌，嘿！那叫一个爽！谢谢黑黑朋友！

                                                               {:4_199:}{:4_190:}{:4_204:}

大猫咪 发表于 2022-5-19 20:28

经典民谣，真好听老黑好制作，老芳是不是就这样的{:4_170:}

马黑黑 发表于 2022-5-19 20:28

大猫咪 发表于 2022-5-19 20:28
经典民谣，真好听老黑好制作，老芳是不是就这样的

差不多差不多

马黑黑 发表于 2022-5-19 20:28

梦油 发表于 2022-5-19 20:26
听着很过瘾，我停止了所有的事情，躺在安乐椅上欣赏着黑黑朋友提供的中国民歌串串烧。品着香茶，听着民歌， ...

音乐能触动人心

大猫咪 发表于 2022-5-19 20:33

马黑黑 发表于 2022-5-19 20:28
差不多差不多

多美啊   吴侬软语    还天天有新茶喝   幸福的不要不要的{:4_187:}{:4_190:}{:5_117:}

马黑黑 发表于 2022-5-19 20:41

大猫咪 发表于 2022-5-19 20:33
多美啊   吴侬软语    还天天有新茶喝   幸福的不要不要的

茶，俺好这一口

大猫咪 发表于 2022-5-19 20:42

马黑黑 发表于 2022-5-19 20:41
茶，俺好这一口

{:4_170:}猫也好   

马黑黑 发表于 2022-5-19 20:54

大猫咪 发表于 2022-5-19 20:42
猫也好

同好

醉美水芙蓉 发表于 2022-5-19 20:54

小辣椒 发表于 2022-5-19 21:43

黑黑已经出了了，明天可以套用了{:4_173:}

马黑黑 发表于 2022-5-19 21:44

小辣椒 发表于 2022-5-19 21:43
黑黑已经出了了，明天可以套用了

这个简单的，应该加点其他元素

小辣椒 发表于 2022-5-19 21:46

马黑黑 发表于 2022-5-19 21:44
这个简单的，应该加点其他元素

这个套用简直不用动脑子{:4_173:}

适合现在的我{:4_201:}

马黑黑 发表于 2022-5-19 21:48

小辣椒 发表于 2022-5-19 21:46
这个套用简直不用动脑子

适合现在的我

一图一歌一按钮，论坛上下到处走{:4_170:}

红影 发表于 2022-5-19 21:54

这个按钮用在帖子很漂亮{:4_187:}

马黑黑 发表于 2022-5-19 22:03

红影 发表于 2022-5-19 21:54
这个按钮用在帖子很漂亮

马马虎虎过得去

梦油 发表于 2022-5-20 10:36

马黑黑 发表于 2022-5-19 20:28
音乐能触动人心

是的，黑黑朋友。音乐,充满了心灵的感受,它与语言相比，有着一种不可比拟的作用。

马黑黑 发表于 2022-5-20 12:10

梦油 发表于 2022-5-20 10:36
是的，黑黑朋友。音乐,充满了心灵的感受,它与语言相比，有着一种不可比拟的作用。

音乐使人愉悦

梦油 发表于 2022-5-20 14:06

马黑黑 发表于 2022-5-20 12:10
音乐使人愉悦

是啊，你看，那交响乐《梁祝》真让人如醉如痴。

马黑黑 发表于 2022-5-20 18:01

梦油 发表于 2022-5-20 14:06
是啊，你看，那交响乐《梁祝》真让人如醉如痴。

喜欢音乐的人，往往是心灵纯净的人
页: [1] 2
查看完整版本: 采茶舞曲（民歌串串烧·车载音乐）