嗯,更新一下动漫小人音乐播放器。

很久很久之前的一个坑了,今天终于填一部分了!演示的话请点击右下角小人,然后,以前的文章在这:https://aoaoa.me/player.html

更新内容

1. 音乐开始播放后,能够一直随机播放,直到暂停按钮被点击。

2. 小人图片第一次被点击后,开始播放音乐,同时切换小人图片,再同时弹出一个播放框(基于Boostrap弹出框)。

3. 音乐播放时,可点击小人显示/隐藏播放框(小人图片不会改成)。

4. 新增一个播放框,显示歌曲名,增加暂停音乐、播放音乐、切换歌曲按钮。

5. 音乐暂停时,可点击小人关闭播放框,同时切换小人图片。

6. 播放框显示歌曲名,播放的歌曲改变时,自动改变显示的歌曲名。

7.  然后,可以手动切换歌曲了…..

代码

首先下载底部的那个压缩包,解压上传到你网站的根目录。

打开dm目录下的music.js,编辑,如下图所示

《嗯,更新一下动漫小人音乐播放器。》

我提供的歌曲外链都是我自己的,然后我开了防盗链,所以你们是用不了的(也就是直接用的话是不会放音乐的),需要你们自己手动添加歌曲和歌名(这个确实麻烦,或许以后会改进吧)。按图里那样操作就行了,还有就是它们两边的引号是不能删的。

OK,咱们开始进入正题。

如果你的网站是基于Bootstrap开发的的话,你可以直接使用以下代码

<link href="/dm/music.css" rel="stylesheet"/>

<div id="audio" class="music" data-original-title="音乐电台" data-container="body" data-toggle="popover" data-placement="left" data-html="true" data-content='<center><img src="/dm/8.png" width="30px" height="30px" id="o" onclick="a();"><img src="/dm/1.png" width="32px" height="32px" id="m" onclick="b();"><img src="/dm/3.png" width="30px" height="30px" id="n" onclick="a();"></center>'>

<img src="/dm/233.gif" width="60px" height="60px" id="d">

</div>

<audio id="music" src="" controls="controls" preload="none" hidden></audio>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js">

<script src="/dm/music.js"></script></script>

为了以上代码能够显示的美观一点,所以我加了很多换行符,建议不要直接复制,代码我一起打包在了底部的压缩包里。

如果你的网站不是基于Bootstrap开发的的话,你也可以直接使用以上代码,只是显示出来的播放器会略微不同(也就是略丑一点)。有能力的可以自行美化。

这是基于Bootstrap的时候

《嗯,更新一下动漫小人音乐播放器。》

这是。。

《嗯,更新一下动漫小人音乐播放器。》

这个样式是我从Bootstrap里单独扒出来的,,,,,,嗯,,,,,你懂得。嗯,这个播放器,理论上是个网页就可以用,没毛病。

最后就是,为了让播放框保持悬浮的位置,我给它的css加了一个 position:fixed!important 属性。如果发现播放框会跟着屏幕动的话,就自己琢磨一下吧。


本地下载

点赞
  1. 女装品牌说道:

    文章不错非常喜欢

  2. 仓井空说道:

    吊毛,露个头,证明你还活着啊,这样搞的挺吓人的

  3. 头条说道:

    文章不错支持一下

  4. 吃馒头的猫说道:

    醒醒,改更新博客了

  5. 爱你的好爸爸说道:

    草泥马狗查查是不是进传销了

  6. 蔚然说道:

    你是不是进传销了 大家都很想你!--来自大云狗的问候

  7. 小王说道:

    不会自动播放下一曲咋办

  8. 小王说道:

    博主自动播放下一曲代码发下

  9. 新闻头条说道:

    文章不错非常喜欢

  10. 错误说道:

    但是你在手机上打开没有声音。没有弄好 :redface: :redface:

    1. 好好丶说道:

      有的...外链比较卡而已...需要等....

      1. 萌哒说道:

        :wink: 不是,我已经自己弄好了~

  11. 梁兴健说道:

    666,很厉害了,原来右下角那个是播放器啊

  12. 墨雨说道:

    老板博客什么系统 :smile:

  13. 阿斯达斯说道:

    老哥,你QQ多少,想下载那个防红源码,被人拿这个骗了几十块钱了

    1. 好好丶说道:

      ,,,,

  14. 浅沫说道:

    如果不用点小人自动播放该怎么弄?

    1. 好好丶说道:

      preload="none" 改成 autoplay="autoplay"

  15. my@cr.cx说道:

    前排支持一下

    1. 好好丶说道:

      :redface: :biggrin: 大佬,都是大佬 :biggrin:

发表评论

电子邮件地址不会被公开。 必填项已用*标注