JavaScript實(shí)現(xiàn)簡(jiǎn)單音樂(lè)播放器
該篇文章會(huì)教你通過(guò)JavaScript制作一個(gè)簡(jiǎn)單的音樂(lè)播放器。包括播放、暫停、上一曲和下一曲。
閱讀本文章你需要對(duì)HTML、CSS和Javascript有基本的了解。
話不多說(shuō)，先上圖。
這樣看起來(lái)有點(diǎn)單調(diào)。
我們把它加在網(wǎng)頁(yè)上試試。
具體效果可以去我的個(gè)人網(wǎng)站查看http://tcxqq.top
好了，成品已經(jīng)展示了接下來(lái)，開(kāi)干吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/music.css"> </head> <body> <audio src="" id="mymusic"></audio> <div class="music"> <div class="pic_div"> <img src="images/music/pictures/disc.png" alt="" class="disc"> <img src="images/music/pictures/default.jpg" alt="" id="music_pic"> <span class="dot"></span> <div class="music_program"> <div id="prograss"></div> </div> <div class="time"> <p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> </div> <div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div> </div> </div> </body> <script src="js/music.js"></script> </html>
先建好基本的HTML框架。
<audio src="" id="mymusic"></audio>為我們的音頻
<div class="music">...</div>里面的部分為音樂(lè)的控件以及進(jìn)度條，圖片等。
<img src="images/music/pictures/disc.png" alt="" class="disc">為旋轉(zhuǎn)的碟片
<img src="images/music/pictures/default.jpg" alt="" id="music_pic">為音樂(lè)專輯圖片
<span class="dot"></span>為 碟片中間的小圓點(diǎn)
<div class="music_program"><div id="prograss"></div></div>
我們通過(guò)DIV嵌套一個(gè)div來(lái)作為音樂(lè)的進(jìn)度條（圖片紅色部分），第一個(gè)div固定寬度，第二個(gè)div用%來(lái)設(shè)置寬度。
<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> 為時(shí)間顯示 播放時(shí)長(zhǎng)和總時(shí)長(zhǎng)
<div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
控制菜單按鈕 上一曲 播放/暫停 下一曲
下面是具體的css代碼
@charset "utf-8";
/* CSS Document */
.music {
height: 150px;
width: 150px;
background:rgba(98,91,91,0.9);
}
.pic_div {
position: relative;
}
.dot {
width: 15px;
height: 15px;
background: #464545;
position: absolute;
border: 2px solid white;
border-radius: 50%;
top: 40px;
left: 85px;
}
.disc {
width: 100px;
position: absolute;
right: 5px;
transform: rotate(30deg);
}
#music_pic {
width: 100px;
position: absolute;
}
.music_program {
height: 2px;
width: 100px;
background: #555;
position: relative;
top: 100px;
}
.music_program div {
height: 100%;
width: 0%;
background: red;
}
.time {
width: 100px;
height: 20px;
position: relative;
top: 85px;
overflow: hide;
}
.time p {
padding-left: 33px;
}
.time p span:nth-of-type(2) {
padding: 0 5px;
}
.music_menu {
width: 150px;
height: 25px;
position: relative;
top: 85px;
}
.music_menu span {
width: 30px;
height: 25px;
display: inline-block;
cursor: pointer;
}
.music_menu span:nth-of-type(1) {
margin-left: 8px;
background: url(../images/music/pictures/back.png) no-repeat 7px;
}
.music_menu span:nth-of-type(2) {
margin-left: 14px;
background: url(../images/music/pictures/play.png) no-repeat 10px;
}
.music_menu span:nth-of-type(3) {
margin-left: 14px;
background: url(../images/music/pictures/forward.png) no-repeat 7px;
}
至于圖片資源的話，博主是在站長(zhǎng)素材下載的
鏈接🔗http://sc.chinaz.com/psd/130622574580.htm
接下來(lái)是最重要的Js部分！
// JavaScript Document
var music=document.getElementById("mymusic");
var prograss=document.getElementById("prograss");
var curtxt=document.getElementById("currenttime");
var duration=document.getElementById("duration");
var music_pic=document.getElementById("music_pic");
var deg=0;//旋轉(zhuǎn)角度
var disctimer,prograsstimer;//碟片計(jì)時(shí)器,進(jìn)度條計(jì)時(shí)器
var musicindex=0;//音樂(lè)索引
var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音樂(lè)數(shù)組
var music_pics=new Array("000002","000001","000001");
//旋轉(zhuǎn)碟片
var disc=document.getElementsByClassName('disc');
//音樂(lè)時(shí)間顯示
function curtime(txt,misic)
{
if(music.currentTime<10)
{
txt.innerHTML="0:0"+Math.floor(music.currentTime);
}else
if(music.currentTime<60)
{
txt.innerHTML="0:"+Math.floor(music.currentTime);
}
else
{
var minet=parseInt(music.currentTime/60);
var sec=music.currentTime-minet*60;
if(sec<10)
{
txt.innerHTML="0"+minet+":"+"0"+parseInt(sec);
}
else
{
txt.innerHTML="0"+minet+":"+parseInt(sec);
}
}
}
//播放暫停
function playPause()
{
var btn=document.getElementById("playbtn");
if(music.paused)
{
music.play();
clearInterval(disctimer);//清除碟片的定時(shí)器
btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改變播放暫停鍵的圖標(biāo)
disctimer=setInterval(function(){
disc[0].style.transform="rotate("+deg+"deg)";
deg+=5;
//每秒設(shè)置進(jìn)度條長(zhǎng)度
},100);
prograsstimer=setInterval(function(){
prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";
curtime(curtxt,music);
if(music.currentTime>=music.duration-1)//片尾跳轉(zhuǎn)下一曲
{
musicindex++;//音樂(lè)索引加一
if(musicindex>=musics.length)//如果音樂(lè)索引超過(guò)長(zhǎng)度，將音樂(lè)索引清零
{
musicindex=0;
}
getMusic();
music.play();//重載音樂(lè)后進(jìn)行播放
}
},1000);
}
else
{
music.pause();//停止音樂(lè)
btn.style.background="url(images/music/pictures/play.png) no-repeat 10px";
clearInterval(disctimer);//清除碟片滾動(dòng)的定時(shí)器
clearInterval(prograsstimer);//清除進(jìn)度條的定時(shí)器
}
}
//下一曲
function nextMusic()
{
musicindex++;//音樂(lè)索引加一
if(musicindex>=musics.length)//如果音樂(lè)索引超過(guò)長(zhǎng)度，將音樂(lè)索引清零
{
musicindex=0;
}
getMusic();
music.play();
}
//上一曲
function backMusic()
{
musicindex--;
if(musicindex<0)//如果索引小于0，將索引變?yōu)樽畲笾?
{
musicindex=musics.length-1;
}
getMusic();
music.play();
}
//讀取音樂(lè)
function getMusic()
{
music.src="images/music/"+musics[musicindex];//改變音樂(lè)的SRC
music_pic.src="images/music/pictures/"+music_pics[musicindex]+".jpg";
if(music.readyState="complete")
{
setTimeout(function(){
duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);
},1000);//一秒后讀取音樂(lè)的總時(shí)長(zhǎng)
}
}
window.onload=function(){
getMusic();
}
這次博主接受批評(píng)，對(duì)代碼進(jìn)行了大量的注釋，方便大家閱讀。
So 這里就不過(guò)多介紹了，這里用的三首歌都是博主喜歡的。
由于博主的網(wǎng)站不支持中文！所以改成拼音了。
第一首是SHE的我曾是少年（喜歡SHE的基本都20+了吧），還有鹿先森樂(lè)隊(duì)的兩首。
歌曲自己喜歡什么就加什么吧！
OK，這就是一個(gè)完整的播放器了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JavaScript錯(cuò)誤捕獲的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-04-04
一個(gè).aspx文件引用一個(gè)js文件:<script type="text/javascript" src="ASSscript.js"></script>2010-03-03
underscore之Collections_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
underscore為集合類對(duì)象提供了一致的接口。集合類是指Array和Object，暫不支持Map和Set。下面通過(guò)本文給大家分享underscore之Collections的相關(guān)知識(shí)，需要的的朋友參考下吧2017-07-07
Object.keys()、Object.values()、Object.entries()用法總結(jié)
本文主要介紹了Object.keys()、Object.values()、Object.entries()用法總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
使用pjax實(shí)現(xiàn)無(wú)刷新更改頁(yè)面url
pjax=pushState+ajax，相信用過(guò)github的同學(xué)都知道，github部分頁(yè)面采用了pjax這個(gè)項(xiàng)目來(lái)實(shí)現(xiàn)ajax無(wú)刷新加載的同時(shí)改變頁(yè)面url。一起來(lái)學(xué)習(xí)一下這個(gè)插件吧。2015-02-02
Python版實(shí)現(xiàn)微信公眾號(hào)掃碼登陸
這篇文章主要介紹了Python版實(shí)現(xiàn)微信公眾號(hào)掃碼登陸，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
隱性類型轉(zhuǎn)換，是==引起的轉(zhuǎn)換，下面通過(guò)本文給大家分享JavaScript 隱性類型轉(zhuǎn)換步驟，感興趣的朋友一起看看吧2018-03-03
這篇文章主要介紹了微信小程序之?dāng)?shù)據(jù)綁定原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
JS如何判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS
本文為大家詳細(xì)介紹下JS如何判斷移動(dòng)端訪問(wèn)設(shè)備并解析對(duì)應(yīng)CSS，感興趣的朋友可以參考下2013-11-11
uniapp電商小程序?qū)崿F(xiàn)訂單30分鐘倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了uniapp電商小程序?qū)崿F(xiàn)訂單30分鐘倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11