示例

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr"><head><meta charset="utf-8"><link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"><script src="https://kit.fontawesome.com/a062562745.js" crossorigin="anonymous"></script><title>MP3 Player</title><link rel=stylesheet href="style.css" media=all> </head><body><audio id="myAudio" ontimeupdate="onTimeUpdate()"><!-- <source src="audio.ogg" type="audio/ogg"> --><source id="source-audio" src="" type="audio/mpeg">Your browser does not support the audio element.
</audio><div class="player-ctn"><div class="infos-ctn"><div class="timer">00:00</div><div class="title"></div><div class="duration">00:00</div></div><div id="myProgress"><div id="myBar"></div></div><div class="btn-ctn"><div class="btn-action first-btn" onclick="previous()"><div id="btn-faws-back"><i class='fas fa-step-backward'></i></div></div><div class="btn-action" onclick="rewind()"><div id="btn-faws-rewind"><i class='fas fa-backward'></i></div></div><div class="btn-action" onclick="toggleAudio()"><div id="btn-faws-play-pause"><i class='fas fa-play' id="icon-play"></i><i class='fas fa-pause' id="icon-pause" style="display: none"></i></div></div><div class="btn-play" onclick="forward()"><div id="btn-faws-forward"><i class='fas fa-forward'></i></div></div><div class="btn-action" onclick="next()"><div id="btn-faws-next"><i class='fas fa-step-forward'></i></div></div><div class="btn-mute" id="toggleMute" onclick="toggleMute()"><div id="btn-faws-volume"><i id="icon-vol-up" class='fas fa-volume-up'></i><i id="icon-vol-mute" class='fas fa-volume-mute' style="display: none"></i></div></div></div><div class="playlist-ctn"></div>
</div>
<script src=app.js></script></body>
</html>

CSS

body{background-color: #2d2d2d;color: #ffc266;font-family: 'Roboto', sans-serif;
}
#myProgress {width: 420px;background-color: #d9d9f2; cursor: pointer;border-radius: 10px;
}#myBar {width: 0%;height: 5px;background-color: #ffc266;border-radius: 10px;
}.logo {fill: red;
}.btn-action{cursor: pointer;padding-top: 10px;width: 30px;
}.btn-ctn, .infos-ctn{display: flex;align-items: center;justify-content: center;
}
.infos-ctn{padding-top: 20px;
}.btn-ctn > div {padding: 5px;margin-top: 18px;margin-bottom: 18px;
}.infos-ctn > div {margin-bottom: 8px;color: #ffc266;
}.first-btn{margin-left: 3px;
}.duration{margin-left: 10px;
}.title{margin-left: 10px;width: 210px;text-align: center;
}.player-ctn{border-radius: 15px;width: 420px;padding: 10px;background-color: #373737;margin:auto;margin-top: 100px;
}.playlist-track-ctn{display: flex;background-color: #464646;margin-top: 3px;border-radius: 5px;cursor: pointer;
}
.playlist-track-ctn:last-child{/*border: 1px solid #ffc266; */
}.playlist-track-ctn > div{margin:10px;
}
.playlist-info-track{width: 80%;
}
.playlist-info-track,.playlist-duration{padding-top: 7px;padding-bottom: 7px;color: #e9cc95;font-size: 14px;pointer-events: none;
}
.playlist-ctn{padding-bottom: 20px;
}
.active-track{background: #4d4d4d;color: #ffc266 !important;font-weight: bold;}.active-track > .playlist-info-track,.active-track >.playlist-duration,.active-track > .playlist-btn-play{color: #ffc266 !important;
}.playlist-btn-play{pointer-events: none;padding-top: 5px;padding-bottom: 5px;
}
.fas{color: #ffc266;font-size: 20px;
}

JS

function createTrackItem(index,name,duration){var trackItem = document.createElement('div');trackItem.setAttribute("class", "playlist-track-ctn");trackItem.setAttribute("id", "ptc-"+index);trackItem.setAttribute("data-index", index);document.querySelector(".playlist-ctn").appendChild(trackItem);var playBtnItem = document.createElement('div');playBtnItem.setAttribute("class", "playlist-btn-play");playBtnItem.setAttribute("id", "pbp-"+index);document.querySelector("#ptc-"+index).appendChild(playBtnItem);var btnImg = document.createElement('i');btnImg.setAttribute("class", "fas fa-play");btnImg.setAttribute("height", "40");btnImg.setAttribute("width", "40");btnImg.setAttribute("id", "p-img-"+index);document.querySelector("#pbp-"+index).appendChild(btnImg);var trackInfoItem = document.createElement('div');trackInfoItem.setAttribute("class", "playlist-info-track");trackInfoItem.innerHTML = namedocument.querySelector("#ptc-"+index).appendChild(trackInfoItem);var trackDurationItem = document.createElement('div');trackDurationItem.setAttribute("class", "playlist-duration");trackDurationItem.innerHTML = durationdocument.querySelector("#ptc-"+index).appendChild(trackDurationItem);}var listAudio = [{name:"Artist 1 - audio 1",file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_5MG.mp3",duration:"02:12"},{name:"Artist 2 - audio 2",file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_2MG.mp3",duration:"00:52"},{name:"Artist 3 - audio 3",file:"https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_1MG.mp3",duration:"00:27"}]for (var i = 0; i < listAudio.length; i++) {createTrackItem(i,listAudio[i].name,listAudio[i].duration);}var indexAudio = 0;function loadNewTrack(index){var player = document.querySelector('#source-audio')player.src = listAudio[index].filedocument.querySelector('.title').innerHTML = listAudio[index].namethis.currentAudio = document.getElementById("myAudio");this.currentAudio.load()this.toggleAudio()this.updateStylePlaylist(this.indexAudio,index)this.indexAudio = index;}var playListItems = document.querySelectorAll(".playlist-track-ctn");for (let i = 0; i < playListItems.length; i++){playListItems[i].addEventListener("click", getClickedElement.bind(this));}function getClickedElement(event) {for (let i = 0; i < playListItems.length; i++){if(playListItems[i] == event.target){var clickedIndex = event.target.getAttribute("data-index")if (clickedIndex == this.indexAudio ) { // alert('Same audio');this.toggleAudio()}else{loadNewTrack(clickedIndex);}}}}document.querySelector('#source-audio').src = listAudio[indexAudio].filedocument.querySelector('.title').innerHTML = listAudio[indexAudio].namevar currentAudio = document.getElementById("myAudio");currentAudio.load()currentAudio.onloadedmetadata = function() {document.getElementsByClassName('duration')[0].innerHTML = this.getMinutes(this.currentAudio.duration)}.bind(this);var interval1;function toggleAudio() {if (this.currentAudio.paused) {document.querySelector('#icon-play').style.display = 'none';document.querySelector('#icon-pause').style.display = 'block';document.querySelector('#ptc-'+this.indexAudio).classList.add("active-track");this.playToPause(this.indexAudio)this.currentAudio.play();}else{document.querySelector('#icon-play').style.display = 'block';document.querySelector('#icon-pause').style.display = 'none';this.pauseToPlay(this.indexAudio)this.currentAudio.pause();}}function pauseAudio() {this.currentAudio.pause();clearInterval(interval1);}var timer = document.getElementsByClassName('timer')[0]var barProgress = document.getElementById("myBar");var width = 0;function onTimeUpdate() {var t = this.currentAudio.currentTimetimer.innerHTML = this.getMinutes(t);this.setBarProgress();if (this.currentAudio.ended) {document.querySelector('#icon-play').style.display = 'block';document.querySelector('#icon-pause').style.display = 'none';this.pauseToPlay(this.indexAudio)if (this.indexAudio < listAudio.length-1) {var index = parseInt(this.indexAudio)+1this.loadNewTrack(index)}}}function setBarProgress(){var progress = (this.currentAudio.currentTime/this.currentAudio.duration)*100;document.getElementById("myBar").style.width = progress + "%";}function getMinutes(t){var min = parseInt(parseInt(t)/60);var sec = parseInt(t%60);if (sec < 10) {sec = "0"+sec}if (min < 10) {min = "0"+min}return min+":"+sec}var progressbar = document.querySelector('#myProgress')progressbar.addEventListener("click", seek.bind(this));function seek(event) {var percent = event.offsetX / progressbar.offsetWidth;this.currentAudio.currentTime = percent * this.currentAudio.duration;barProgress.style.width = percent*100 + "%";}function forward(){this.currentAudio.currentTime = this.currentAudio.currentTime + 5this.setBarProgress();}function rewind(){this.currentAudio.currentTime = this.currentAudio.currentTime - 5this.setBarProgress();}function next(){if (this.indexAudio <listAudio.length-1) {var oldIndex = this.indexAudiothis.indexAudio++;updateStylePlaylist(oldIndex,this.indexAudio)this.loadNewTrack(this.indexAudio);}}function previous(){if (this.indexAudio>0) {var oldIndex = this.indexAudiothis.indexAudio--;updateStylePlaylist(oldIndex,this.indexAudio)this.loadNewTrack(this.indexAudio);}}function updateStylePlaylist(oldIndex,newIndex){document.querySelector('#ptc-'+oldIndex).classList.remove("active-track");this.pauseToPlay(oldIndex);document.querySelector('#ptc-'+newIndex).classList.add("active-track");this.playToPause(newIndex)}function playToPause(index){var ele = document.querySelector('#p-img-'+index)ele.classList.remove("fa-play");ele.classList.add("fa-pause");}function pauseToPlay(index){var ele = document.querySelector('#p-img-'+index)ele.classList.remove("fa-pause");ele.classList.add("fa-play");}function toggleMute(){var btnMute = document.querySelector('#toggleMute');var volUp = document.querySelector('#icon-vol-up');var volMute = document.querySelector('#icon-vol-mute');if (this.currentAudio.muted == false) {this.currentAudio.muted = truevolUp.style.display = "none"volMute.style.display = "block"}else{this.currentAudio.muted = falsevolMute.style.display = "none"volUp.style.display = "block"}}

音乐播放界面（Music playing interface）相关推荐

仿QQ音乐播放界面（已实现主要功能）
源码地址:https://github.com/yeaper/MusicPlayer 因项目需要,实现的功能类似QQ音乐播放界面使用 kotlin 代替 Java 主要功能: 1.播放.暂停音乐 2 ...
Android车机 USB1音乐播放界面，拔插USB2，闪退到主界面，音乐停止播放(#10329)
现象描述: USB1音乐播放界面,拔插USB2,闪退到主界面,音乐停止播放. 原因分析: 关键异常log如下: 解决措施: U盘unmount时PorcessKiller会kill掉打开文件的进程,导 ...
使用css动画实现网易云音乐播放界面波浪动画效果
通过实现CSS实现仿网易云音乐播放界面动画效果,最终的效果如下界面布局图片也是实现滚动效果的,使用四个div,来标识每一帧波动的效果. <div class="container- ...
gulp仿移动端网易云音乐播放界面
网易云音乐,凭借其简洁的播放界面设计.歌曲推荐系统和完善的评论机制在市场上拥有超高人气的一款音乐播放器,深受网友喜爱.所以在这个在这个举国欢庆的假日里,我的魔爪终于伸向了她. 更新: Github传送 ...
仿网易云音乐播放界面
前言网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.笔者出于学习与挑战的想法,思考播放界面背后的实现原理,并写了一个小程序. 笔者尽可能地去模仿官方的视觉.交 ...
Android仿网易云音乐播放界面
概述网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.这里抛砖引玉,原文地址:http://www.jianshu.com/p/cb54990219d9 首先来 ...
java4android网易云,Android仿网易云音乐播放界面
概述网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅. 首先来看一下网易的播放效果. 要实现上面的功能,我们需要对界面进行一个拆分,拆分后大概包含如下结构: 主 ...
自定义仿网易云音乐播放界面
清单文件添加 <service android:name="com.rookie.shiyue20180528.model.MusicService"android:enab ...
Android高仿网易云音乐播放界面
现在很多的播放器的播放界面都是采用光盘的转动,下面是我仿造网易的播放界面.先上两张图: 第一张为播放前的界面,第二张为点击播放按钮的图片.布局文件如下: <RelativeLayout xmln ...

音乐播放界面（Music playing interface）

音乐播放界面如何生成？

示例

HTML

CSS

JS

音乐播放界面（Music playing interface）相关推荐

最新文章

热门文章