点滴记录 见证历程
本站居然运行了16年22天
一直想寻一款简单的音乐播放器,无奈网上的都是插件,即使你这个页面没有音乐仍然会加载几个css\js之类的无用玩意,与我的“简洁”理念相悖,今天无意中在别人的博客发现一个超简单的播放器,查看源码也是一款插件,但让我惊喜的是这款播放器只需加载 2 个文件且把音乐地址换了就能播放,花了几分钟,最多五分钟就拿来用了。
演示:
{music src : "https://yrsn.cc/usr/uploads/2024/09/AniFace - Where are you.mp3",title : "Where are you",singer : "AniFace"/}
源码:
<link rel="stylesheet" href="https://yrsn.cc/usr/plugins/tools/zbaudio/style.css">
<script src="https://yrsn.cc/usr/plugins/tools/zbaudio/audio.js"></script>
<p>
<span class="zbaudio">
<span class="zbaudio_img"></span>
<span class="zbaudio_info">
<strong></strong>
<em class="zbaudio_singer"></em>
<span class="zbaudio_area">
<span class="zbaudio_item">
<span class="zbaudio_progress">
<span class="zbaudio_now">
<span class="zbaudio_bar"></span>
</span>
<span class="zbaudio_cache"></span>
</span>
<span class="zbaudio_time">
<em class="zbaudio_current">00:00</em>
<em class="zbaudio_total"></em>
</span>
</span>
<span class="zbaudio_play">
<em data-action="play" data-on="play" data-off="pause"></em>
</span>
</span>
</span>
</span>
</p>
<script>var setConfig = {song : [{cover : "", src : "https://yrsn.cc/usr/uploads/2024/09/AniFace - Where are you.mp3",title : "Where are you",singer : "AniFace" }],error : function(meg){console.log(meg);}};var zbaudio = audioPlay(setConfig);if(zbaudio){zbaudio.loadFile(1);}</script>
下一步计划做成那种文章中放一个mp3 链接则自动替换成这段播放器代码,恩,尽快完善。
9.30 初步已完成,以短代码的形式实现php正则替换播放器代码,正则表达式写得不是很完美,不是太满意,折腾期间知道了这个小播放器原来是ZBLOG的插件。
10.1 将短代码整合进了编辑器,点击可弹窗输入网址,取代手工输入短代码更方便了。
10.5 试用几天后还是删掉了,真的真的用不上。