/ Published in css 设计, html 设计, new code design, 前端设计

【网页前端设计】使用Html Css & JavaScript 如何创建一个音乐播放器 diy音乐播放器cid1187+源码下载


html

<!DOCTYPE html>
<html>
<head>
  <title>music player</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <div class="main">
  	<p id="logo"><i class="fa fa-music"></i>Music</p>
    
    <!--- left part --->
     <div class="left">

      <!--- song img --->
      <img id="track_image">
         <div class="volume">
            <p id="volume_show">90</p>
            <i class="fa fa-volume-up" aria-hidden="true" onclick="mute_sound()" id="volume_icon"></i>
            <input type="range" min="0" max="100" value="90" onchange="volume_change()" id="volume">  
         </div>

     </div>
 

     <!--- right part --->
  	 <div class="right">

        <div class="show_song_no">
          <p id="present">1</p>
          <p>/</p>
          <p id="total">5</p>
        </div>

       <!--- song title & artist name --->
      <p id="title">title.mp3</p>
      <p id="artist">Artist name</p>

      <!--- middle part --->
  	 	<div class="middle">
  	       <button onclick="previous_song()" id="pre"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
      	   <button onclick="justplay()" id="play"><i class="fa fa-play" aria-hidden="true"></i></button>
  	       <button onclick="next_song()" id="next"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
  	   </div>

       <!--- song duration part --->
        <div class="duration">
           <input type="range" min="0" max="100" value="0" id="duration_slider" onchange="change_duration()">
        </div>
           <button id="auto" onclick="autoplay_switch()">Auto play <i class="fa fa-circle-o-notch" aria-hidden="true"></i></button>
  	</div>


  </div>
   
  <!--- Add javascript file --->
  <script src="script.js"></script>

</body>
</html>

css

*{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main{
  position: relative;
  height: 80%;
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #5D6D7E, #566573);
}
.main button{
  padding: 10px 12px;
  margin: 0 10px;
}
.main #logo{
  position: absolute;
  top: 10px;
  left: 30px;
  font-size: 25px;
  color: #ccc;
}
.main #logo i{
  margin-right: 15px;
}

/* left & right part */
.right,.left{
  position: relative;
  height: 100%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* song image */
.left img{
  height: 300px;
  width: 80%;
  border-radius: 15px;
  box-shadow: 1px 0px 20px 12px rgba(240,240,240,0.2);
}

/* both range slider part */
input[type="range"] {
  -webkit-appearance: none;
  width: 50%;
  outline: none;
  height: 2px;
  margin: 0 15px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  height: 20px;
  width: 20px;
  background: #FF8A65;
  border-radius: 50%;
  cursor: pointer;
}
.right input[type=range]{
  width: 40%;
}



/* volume part */
.left .volume{
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.left .volume p{
  font-size: 15px;
}
.left .volume i{
  cursor: pointer;
  padding: 8px 12px;
  background: #FF8A65;
}
.left .volume i:hover{
  background: rgba(245,245,245,0.1);
}
.volume #volume_show{
  padding: 8px 12px;
  margin: 0 5px 0 0;
  background: rgba(245,245,245,0.1);
}



/* right part */
 .right .middle{
 	width: 100%;
    display: flex;
  align-items: center;
  justify-content: center;
}
.right .middle button{
  border: none;
  height: 70px;
  width: 70px;
  border-radius: 50%;	
    display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  transition: 0.5s;
  background: rgba(255,255,255,0.1);
}
.right #title{
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  text-transform: capitalize;
  color: #fff;
  font-size: 35px;
}
.right #artist{
  position: absolute;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  text-transform: capitalize;
  color: #fff;
  font-size: 18px;
}
.right .duration{
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  margin-top: 40px;
}
.right .duration p{
  color: #fff;
  font-size: 15px;
  margin-left: 20px;
}
.right #auto{
  font-size: 18px;
  cursor: pointer;
  margin-top: 45px;
  border: none;
  padding: 10px 14px;
  color: #fff;
  background: rgba(255,255,255,0.2);
  outline: none;
  border-radius: 10px;
}
.right #auto i{
  margin-left: 8px;
}
#play{
  background: #FF8A65;
}
.right button:hover{
  background: #FF8A65;
}
.right i:before{
  color: #fff;
  font-size: 20px;
}

.right .show_song_no{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: #fff;
  border-radius: 5px;
  background: rgba(255,255,255,0.2);
}
.right .show_song_no p:nth-child(2){
  margin: 0 5px;
}

js

let previous = document.querySelector('#pre');
let play = document.querySelector('#play');
let next = document.querySelector('#next');
let title = document.querySelector('#title');
let recent_volume= document.querySelector('#volume');
let volume_show = document.querySelector('#volume_show');
let slider = document.querySelector('#duration_slider');
let show_duration = document.querySelector('#show_duration');
let track_image = document.querySelector('#track_image');
let auto_play = document.querySelector('#auto');
let present = document.querySelector('#present');
let total = document.querySelector('#total');
let artist = document.querySelector('#artist');



let timer;
let autoplay = 0;

let index_no = 0;
let Playing_song = false;

//create a audio Element
let track = document.createElement('audio');


//All songs list
let All_song = [
   {
     name: "first song",
     path: "music/song1.mp3",
     img: "img/img1.jpg",
     singer: "1"
   },
   {
     name: "second song",
     path: "music/song2.mp3",
     img: "img/img2.jpg",
     singer: "2"
   },
   {
     name: "third song",
     path: "music/song3.mp3",
     img: "img/img3.jpg",
     singer: "3"
   },
   {
     name: "fourth song",
     path: "music/song4.mp3",
     img: "img/img4.jpg",
     singer: "4"
   },
   {
     name: "fifth song",
     path: "music/song5.mp3",
     img: "img/img5.jpg",
     singer: "5"
   }
];


// All functions


// function load the track
function load_track(index_no){
  clearInterval(timer);
  reset_slider();

  track.src = All_song[index_no].path;
  title.innerHTML = All_song[index_no].name;	
  track_image.src = All_song[index_no].img;
    artist.innerHTML = All_song[index_no].singer;
    track.load();

  timer = setInterval(range_slider ,1000);
  total.innerHTML = All_song.length;
  present.innerHTML = index_no + 1;
}

load_track(index_no);


//mute sound function
function mute_sound(){
  track.volume = 0;
  volume.value = 0;
  volume_show.innerHTML = 0;
}


// checking.. the song is playing or not
 function justplay(){
 	if(Playing_song==false){
 		playsong();

 	}else{
 		pausesong();
 	}
 }


// reset song slider
 function reset_slider(){
 	slider.value = 0;
 }

// play song
function playsong(){
  track.play();
  Playing_song = true;
  play.innerHTML = '<i class="fa fa-pause" aria-hidden="true"></i>';
}

//pause song
function pausesong(){
  track.pause();
  Playing_song = false;
  play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
}


// next song
function next_song(){
  if(index_no < All_song.length - 1){
    index_no += 1;
    load_track(index_no);
    playsong();
  }else{
    index_no = 0;
    load_track(index_no);
    playsong();

  }
}


// previous song
function previous_song(){
  if(index_no > 0){
    index_no -= 1;
    load_track(index_no);
    playsong();

  }else{
    index_no = All_song.length;
    load_track(index_no);
    playsong();
  }
}


// change volume
function volume_change(){
  volume_show.innerHTML = recent_volume.value;
  track.volume = recent_volume.value / 100;
}

// change slider position 
function change_duration(){
  slider_position = track.duration * (slider.value / 100);
  track.currentTime = slider_position;
}

// autoplay function
function autoplay_switch(){
  if (autoplay==1){
       autoplay = 0;
       auto_play.style.background = "rgba(255,255,255,0.2)";
  }else{
       autoplay = 1;
       auto_play.style.background = "#FF8A65";
  }
}


function range_slider(){
  let position = 0;
        
        // update slider position
    if(!isNaN(track.duration)){
       position = track.currentTime * (100 / track.duration);
       slider.value =  position;
        }

       
       // function will run when the song is over
       if(track.ended){
       	 play.innerHTML = '<i class="fa fa-play" aria-hidden="true"></i>';
           if(autoplay==1){
           index_no += 1;
           load_track(index_no);
           playsong();
           }
      }
     }

在线演示

让链接同时具备两种打开方式
获取源码: drive-download-20211210T122230Z-001
下载数:697人次, 文件大小: 3.6 KB, 上传日期: 2022年-2 月-11日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,286 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 8元 才能查看此处内容！立即支付

Tagged under: ,