侧边栏壁纸
博主昵称
音乐播放器整合成功,做了个判断很不错 - 难说博客

一直以来博客都有发表文章自定义背景音乐的功能,这个功能很早就实现了,苦于没有好看的播放器样式一直没有在前台显示,今天整合了一个比较简洁的,看上去蛮清爽就决定使用它了,我再前台做了...

音乐播放器整合成功,做了个判断很不错

HaoOuBa
2020年5月12日 20:29 星期二 / 4 评论 / 352 阅读

音乐播放器

一直以来博客都有发表文章自定义背景音乐的功能,这个功能很早就实现了,苦于没有好看的播放器样式一直没有在前台显示,今天整合了一个比较简洁的,看上去蛮清爽就决定使用它了,我再前台做了个判断,判断它是否包含MP3字段,包含的话显示播放器,不包含则不显示,一下代码自用。判断代码请点这里了解

<?php
if(strpos($kongxin,'.mp3') !==false){
 echo '<link href="http://www.su1018.cn/content/templates/red_zui/baozi/yinyue.css" rel="stylesheet" />
<div class="audio green-audio-player">
  <div class="loading">
    <div class="spinner"></div>
  </div>
  <div class="play-pause-btn">  
    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewBox="0 0 18 24">
      <path fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon" id="playPause">
    </svg>
  </div>
  <div class="controls">
    <span class="current-time">0:00</span>
    <div class="slider" data-direction="horizontal">
      <div class="progress">
        <div class="pin" id="progress-pin" data-method="rewind"></div>
      </div>
    </div>
    <span class="total-time">0:00</span>
  </div>
  <div class="volume">
    <div class="volume-btn">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="#566574" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z" id="speaker">
      </svg>
    </div>
    <div class="volume-controls hidden">
      <div class="slider" data-direction="vertical">
        <div class="progress">
          <div class="pin" id="volume-pin" data-method="changeVolume"></div>
        </div>
      </div>
    </div>
  </div>
  <audio autoplay crossorigin>
    <source src="',$kongxin,'" type="audio/mpeg">
  </audio>
</div>
<script src="http://www.su1018.cn/content/templates/red_zui/baozi/yinyue.js"></script>';
}else{
       echo '';
}
?>

    往下面翻翻看

    OωO
    取消

  1. 头像
    蓝溪
    Windows 10 · Google Chrome

    新手,请问代码加到什么位置

    回复
    1. 头像
      小控心
      Windows 10 · Google Chrome
      @蓝溪:你博客是什么程序,我这个是emlog用的
      回复

  2. 头像
    Edipse
    Windows 10 · Google Chrome

    播放器显示的样式跟主题很搭

    回复
    1. 头像
      小控心
      Windows 10 · Google Chrome
      @Edipse:是啊,自己改出来的,我看你很少动主题
      回复

难说博客
登陆 注册

  • 634运行天数
  • 909评论数量
  • 400文章数量

热门文章

老虎控台中文操作界面

标签列表

最新评论


专属相册,记录属于我和你的每一个瞬间

小控心满眼都是小包子

查看相册