绿叶清舟 发表于 2022-9-13 20:27

给我爱的人 - 范琳

本帖最后由 绿叶清舟 于 2022-9-13 20:29 编辑 <br /><br /><style type="text/css">
.mama33 { position: relative; left: -250px; width: 1100px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/6320739516f2c2beb1aef56e.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }

#waiDiv { margin:10px; padding:8px; width:330px; background:#d1a2aa; border-radius:10px; box-shadow:2px 2px 4px #000; display:flex; flex-direction:column; position:relative; }
#audDiv { width:100%; display:flex; flex-direction:row; align-items:center; font-size:10px; position: relative; }
#add1 { margin-left: 12px; background:#dfd1d1; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#dfd1d1; color:#e2d5d5; min-height:100px; padding:10px; border:1px solid olive; font-size:14px; column-count: 2;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:red; }
#prompt { position:absolute; left:200px; top:50px; width:00px; padding:6px 12px; background:silver; font-size:12px; display:none; box-shadow:1px 1px 1px #666; border-radius:2px; }
#prompt input { outline:none; }
#prompt input { margin:4px;padding:4px; width:300px; }
#prompt input { border-radius:4px; cursor:pointer;border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#audDiv input, #audDiv input { cursor:pointer; }
#paDiv { margin: auto; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; position: relative; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #dfd1d1; text-align: center; background: linear-gradient(90deg, olive, #85565e) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>

<div class="mama33"></div>


<DIVstyle="position: relative; opacity: 0.8; LEFT: -116px; TOP: -400px">
<div id="waiDiv">
      <div id="audDiv">
                <div id="paDiv">
                        <div id="btn-ro">·</div>
                        <div id="jindu"><div id="jd-go"></div></div>
                </div>
                <input id="muted" type="checkbox" onclick="aud.muted = this.checked ? true : false">静音
                <input id="dqxh" type="radio" name="rad" checked="checked" onclick="howplay()" />单曲
                <input id="lhbf" type="radio" name="rad" onclick="howplay()" />轮播
                <div id="add1">+</div>
      </div>
      <div id="mLiDiv"></div>
      <div id="prompt">
      <div>添歌</div>
                <input type="text" id="mName" placeholder="歌曲名称" /><br />
                <input type="text" id="mUrl" placeholder="歌曲地址" /><br />
                <div style="text-align:center;">
                        <input id="subMe" type="button" value=" 添加 " />
                        <input id="cancelMe" type="button" value=" 算了 " />
                </div>
      </div>
</div>
</div>

<script>
//音乐数据 注意最后一个结尾不要逗号但前面每一个的结尾都要有逗号
var muAr = [
      ["http://music.163.com/song/media/outer/url?id=84187.mp3","温柔的倾诉"],
      ["http://music.163.com/song/media/outer/url?id=84193.mp3","可爱的家"],
      ["http://music.163.com/song/media/outer/url?id=84175.mp3","奔放的旋律"],
      ["http://music.163.com/song/media/outer/url?id=84181.mp3","海滨之歌"],
      ["http://music.163.com/song/media/outer/url?id=84173.mp3","月亮河"],
      ["http://music.163.com/song/media/outer/url?id=84196.mp3","罗密欧与朱丽叶"],
      ["http://music.163.com/song/media/outer/url?id=84190.mp3","试着回忆"],
      ["http://music.163.com/song/media/outer/url?id=84171.mp3","给我爱的人"],
      ["http://music.163.com/song/media/outer/url?id=84184.mp3","柔情"],
      ["http://music.163.com/song/media/outer/url?id=84199.mp3","往日情怀"],
];

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.getElementById('myPlayer');
var mLi = document.getElementById('mLiDiv');
var mAdd = document.getElementById('add1');
var prom = document.getElementById('prompt');
var cancelMe = document.getElementById('cancelMe');
var subMe = document.getElementById('subMe');
var dqxh = document.getElementById('dqxh');
var lhbf = document.getElementById('lhbf');
var aud = document.createElement('audio');
aud.loop = true;
var playIdx = 0; //当前播放索引
if(aud.paused) btn.style.animationPlayState="paused";
//写歌单
var str = "";
for(j=0; j<muAr.length; j++) {
      str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;

function iPlay(idx){ //播放函数
      playIdx = idx;
      aud.src = muAr;
      aud.play();
      aud.addEventListener('timeupdate', tmMsg, true);
      aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
      btn.style.animationPlayState="running";
      nameRed(playIdx);
}

function howplay(){ //单曲&轮播处理
      dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
      prom.style.display = "none";
}

function playNext(){ //处理下一首
      if(aud.paused) iPlay(playIdx);
      playIdx += 1;
      if(playIdx >= muAr.length) playIdx = 0;
}

function nameRed(){ //歌单着色
      for(k=0;k<muAr.length;k++){
                let listId = "list" + k;
                document.getElementById(listId).style.removeProperty("color");
      }
      listId = "list" + playIdx;
      document.getElementById(listId).style.color = "red";
}

function tmMsg(){ //进度条
      let auT = Math.floor(aud.duration - aud.currentTime);
      let auM = auT / 60;
      let auMs = parseInt(auM);
      if (auMs <10) auMs = "0" + auMs;
      let auS = auT % 60;
      let auSs = Math.round(auS);
      if (auSs < 10) auSs = "0" + auSs;
      let jd = (100*aud.currentTime)/aud.duration;
      if(jd>0) {
                jindu.innerHTML = "- " + auMs +":" + auSs;
                jindu.style.backgroundSize = jd+ "% 8px";
      }
}

jindu.onclick = function(){ //进度控制
      let w = offset(jindu,"left");
      let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
      aud.currentTime = x;
}

function offset(obj,direction){//获取元素总偏移量
      let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
      let realNum = obj;
      let positionParent = obj.offsetParent;
      while(positionParent != null){
                realNum += positionParent;
                positionParent = positionParent.offsetParent;
      }
      return realNum;
}

btn.onclick = function(){ //光盘按钮点击事件
      aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}

mAdd.onclick = function(){ prom.style.display = "block"; } //呼出加歌界面
cancelMe.onclick = function(){ prom.style.display = "none"; } //放弃加歌

subMe.onclick = function(){ //加歌并播放新歌
      let uri = document.getElementById('mUrl');
      let name = document.getElementById('mName');
      let tnum = muAr.length;
      let str1 = uri.value.trim();
      let str2 = name.value.trim();
      if(str1 !="" && str2 != ""){
                muAr = ;
                mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
                iPlay(tnum);
                uri.value = "";
                name.value = "";
      }
      prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);
</script>

红芍药 发表于 2022-9-13 20:29

清舟的音画也做得好，好听好听。{:4_204:}{:4_204:}

梦缘 发表于 2022-9-13 20:38

漂亮，好看好听，感谢分享！{:4_204:}

绿叶清舟 发表于 2022-9-13 20:52

红芍药 发表于 2022-9-13 20:29
清舟的音画也做得好，好听好听。

芍药好，还在学习的呢

绿叶清舟 发表于 2022-9-13 20:53

梦缘 发表于 2022-9-13 20:38
漂亮，好看好听，感谢分享！

谢谢梦缘支持

红影 发表于 2022-9-13 22:15

这个播放器的界面还是第一次看到呢，界面漂亮，操作方便，很赞{:4_187:}

红影 发表于 2022-9-13 22:16

整体风格粉嫩清新，欣赏清舟好制作{:4_199:}

绿叶清舟 发表于 2022-9-14 22:17

红影 发表于 2022-9-13 22:15
这个播放器的界面还是第一次看到呢，界面漂亮，操作方便，很赞

就是以前的那个啊，只是改了一下颜色的了

红影 发表于 2022-9-15 15:49

绿叶清舟 发表于 2022-9-14 22:17
就是以前的那个啊，只是改了一下颜色的了

弄出来的效果特别好呢，清舟太厉害了{:4_187:}
页: [1]
查看完整版本: 给我爱的人 - 范琳