Hey! Hello~

658文章 21相册

收藏 归档 足迹

王叔书的个人主页 运行16年112天

签名:点滴记录 见证历程 朴素的文字 浓厚的情感
所在地:贵州·贵阳
6小时前 上线 留言 已实名备案
格言:花有重开日,人无再少年,愿自己内心依然少年,永保一颗少年的心,心存善愿和远方。

找到一个即插即用的播放器

30Sep2024 王叔书 0

一直想寻一款简单的音乐播放器,无奈网上的都是插件,即使你这个页面没有音乐仍然会加载几个css\js之类的无用玩意,与我的“简洁”理念相悖,今天无意中在别人的博客发现一个超简单的播放器,查看源码也是一款插件,但让我惊喜的是这款播放器只需加载 2 个文件且把音乐地址换了就能播放,花了几分钟,最多五分钟就拿来用了。
演示:

{music src : "https://9413.love/usr/uploads/2024/09/AniFace - Where are you.mp3",title : "Where are you",singer : "AniFace"/}

源码:

<link rel="stylesheet" href="https://9413.love/usr/plugins/tools/zbaudio/style.css">
<script src="https://9413.love/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://9413.love/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 试用几天后还是删掉了,真的真的用不上。

暂无留言

留言

9413.LOVE