首页>>音乐/视频>>简单实用的HTML5音乐播放器(2019-05-28)

简单实用的HTML5音乐播放器

歌曲播放的时候可以类似CD旋转的效果，每首歌可以自定义背景图片

简单实用的HTML5音乐播放器
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div id="freejs">  
  2.      
  3.        <div id="bg-artwork"></div>  
  4.        <div id="bg-layer"></div>  
  5.        <div id="player">  
  6.            <div id="player-track">  
  7.                <div id="album-name"></div>  
  8.                <div id="track-name"></div>  
  9.                <div id="track-time">  
  10.                    <div id="current-time"></div>  
  11.                    <div id="track-length"></div>  
  12.                </div>  
  13.                <div id="s-area">  
  14.                    <div id="ins-time"></div>  
  15.                    <div id="s-hover"></div>  
  16.                    <div id="seek-bar"></div>  
  17.                </div>  
  18.            </div>  
  19.            <div id="player-content">  
  20.                <div id="album-art">  
  21.                    <img src="images/1.jpg" class="active" id="_1">  
  22.                    <img src="images/2.jpg" id="_2">  
  23.                    <img src="images/3.jpg" id="_3">  
  24.                    <img src="images/4.jpg" id="_4">  
  25.                    <img src="images/5.jpg" id="_5">  
  26.                    <div id="buffer-box">加载中...</div>  
  27.                </div>  
  28.                <div id="player-controls">  
  29.                    <div class="control">  
  30.                        <div class="button" id="play-previous">  
  31.                            <i class="fas fa-backward"></i>  
  32.                        </div>  
  33.                    </div>  
  34.                    <div class="control">  
  35.                        <div class="button" id="play-pause-button">  
  36.                            <i class="fas fa-play"></i>  
  37.                        </div>  
  38.                    </div>  
  39.                    <div class="control">  
  40.                        <div class="button" id="play-next">  
  41.                            <i class="fas fa-forward"></i>  
  42.                        </div>  
  43.                    </div>  
  44.                </div>  
  45.            </div>  
  46.        </div>  
  47.    </div>  

 


原文地址:http://www.freejs.net/article_yingyueshipin_781.html