文章詳情頁

原生JS實現音樂播放器

瀏覽：126日期：2024-04-06 15:27:22

本文實例為大家分享了JS實現音樂播放器的具體代碼，供大家參考，具體內容如下

首先，使用HTML搭好我們的框架結構。這一步為了提高我們代碼的可讀性，多寫注釋。

<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'> <title>原生JS音樂播放器</title> <link rel='stylesheet' href='http://www.gepszalag.com/bcjs/css/public.css' > <link rel='stylesheet' href='http://www.gepszalag.com/bcjs/css/css.css' > </head> <body>  <div class='music'>  <div class='word'> <div class='clears'></div>  <div class='img'> <img src='http://www.gepszalag.com/bcjs/images/1.jpg' alt='' /></div>  </div>   <div class='mtv'>  <div class='text'> <h1 id='sName'>歌曲名稱</h1> <h2 id='singer'>歌手</h2> </div>   <div class='vol01'> <div id='volText'> 100% </div> <div class='volBottom'> <div id='vol'> <div id='volCol'></div> <div id='volB'></div> </div> <div class='vImg'> <img src='http://www.gepszalag.com/bcjs/images/音量.png' alt='' /> </div> </div> </div>  </div>   <div class='progress'> <span id='cTime'>00:00</span>  <span id='tTime'>00:00</span>  <div class='clears'></div>  <div id='songPro'> <div id='proBar'></div> </div>  </div>   <div class='ctrls'> <div class='btn'> <img src='http://www.gepszalag.com/bcjs/images/prev.png' alt='' /> <img src='http://www.gepszalag.com/bcjs/images/next.png' alt='' /> </div> <button type='button' id='playBtn'><img src='http://www.gepszalag.com/bcjs/images/播放.png' alt='' /></button> </div>  <audio src='http://www.gepszalag.com/bcjs/14207.html#' id='music'></audio> </div>  <script src='http://www.gepszalag.com/bcjs/js/js.js'></script> </body></html>

第二步，搭好框架后，就用CSS給他寫上你喜歡的樣式。注意這里我是將樣式分為了公共樣式和獨立樣式分開寫的，提高代碼可重復利用，當然你也可以使用SASS更方便，這里我只提供了獨立樣式，公共樣式可以在網上自主尋找。

html { background: #92b991;}.music { width: 670px; height: 400px; background: url('../images/bg.jpg') no-repeat center; margin-left: auto; margin-right: auto; border: 1px #3d5e59 solid; margin-top: 150px; border-radius: 20px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); position: relative;}.img { width: 200px; height: 200px; border: 2px #fff solid; overflow: hidden; border-radius: 100%; margin-top: 50px; margin-left: 35%;}.mtv { width: 670px; position: relative;}.text { color: #fff; margin-right: 30px; margin-left: 30px; margin-bottom: 10px;}.text>h1 { font-size: 24px; line-height: 30px; font-weight: normal;}.text>h2 { font-family: 'Microsoft YaHei'; font-size: 14px; font-weight: 300; line-height: 1.7;}.vol01 { position: absolute; height: 30px; width: 120px; right: 30px; top: -8%;}.volPro { width: 100%; height: 5px; margin-top: 44.5px; border: 1px #fff solid; border-radius: 5px;}.volColor { height: 5px; width: 100%; color: #fff; pointer-events: none;}.volBlock { pointer-events: none; position: absolute; top: 42px; width: 10px; height: 10px; border: 1px #fff solid; background: #f4f3f3; border-radius: 100%; left: 100%; margin-left: -5px;}.volTop { color: #fff; font-size: 10px; position: absolute; top: 25px; right: 0; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.vImg { position: absolute; top: 38px; left: -26px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.time { font-family: 'Microsoft YaHei'; font-size: 10px; line-height: 1.5; color: #fff; margin-top: 25px;}.cTime { float: left; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.tTime { float: right; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}.progress { margin-left: 30px; margin-right: 30px;}.proBar { width: 100%; height: 2px; overflow: hidden; background: #B292FF; margin-top: 5px; border-radius: 5px;}.proColor { height: 7px; width: 30%; background: #fff; pointer-events: none;}.ctrls { text-align: center; margin-top: 20px; margin-left: 30px; margin-right: 30px;}.btn { position: absolute; top: 50px;}.nextPrev { right: 0; margin-left: 200px; opacity: 0.1; transition: all 0.3s;}.nextPrev:hover { opacity: 0.5;}.prevBtn { left: 0; opacity: 0.1; transition: all 0.3s;}.prevBtn:hover { opacity: 0.5;}.playBtn { height: 200px; width: 200px; border-radius: 200px; opacity: 0.3; position: absolute; top: 52px; left: 250px; margin-left: -14px; transition: all 0.3s;}.playBtn:hover { opacity: 0.5; background: #46847b;}

第三步，也是讓音樂播放器具有靈魂的東西，使用JS添加功能。

1.獲取ID（當然這里也可以獲取類名或是元素，看你自己的習慣）。

let music = document.getElementById('music');let playBtn = document.getElementById('playBtn');let prevBtn = document.getElementById('prevBtn');let nextBtn = document.getElementById('nextBtn');let img = document.getElementById('img');let sName = document.getElementById('sName');let singer = document.getElementById('singer');let tTime = document.getElementById('tTime');let proBar = document.getElementById('proBar');let cTime = document.getElementById('cTime');let songPro = document.getElementById('songPro');let vol = document.getElementById('vol');let volCol = document.getElementById('volCol');let volB = document.getElementById('volB');let volText = document.getElementById('volText');

2.添加音樂播放功能。

導入音樂

let songs = [{ mp3: 'music/01.mp3', singer: '趙薇', name: '不能和你分手', img: 'images/1.jpg' }, { mp3: 'music/04.mp3', singer: '陳粒', name: '易燃易爆炸', img: 'images/2.jpg' }, { mp3: 'music/06.mp3', singer: '胡夏/郁可唯', name: '知否知否', img: 'images/3.jpg' }];

音樂播放

let changeMusic = function(index) { music.src = songs[index].mp3; img.src = songs[index].img; sName.innerHTML = songs[index].name; singer.innerHTML = songs[index].singer; proBar.style.width = 0; }; let index = 0; changeMusic(index);

音樂播放暫停

playBtn.addEventListener('click', function(event) { if (music.paused) { music.play(); event.currentTarget.innerHTML = ’<img src='http://www.gepszalag.com/bcjs/images/暫停.png' alt=''/>’; } else { music.pause(); event.currentTarget.innerHTML = ’<img src='http://www.gepszalag.com/bcjs/images/播放.png' alt=''/>’; } });

音樂切換

prevBtn.addEventListener('click', function(event) { //上一首 index--; if (index <= -1) { index = songs.length - 1; } changeMusic(index); }); nextBtn.addEventListener('click', function(event) { //下一首 index++; if (index > songs.length - 1) { index = 0; } changeMusic(index); }); music.addEventListener(’ended’,function () { //自動播放下一首 index++; if (index > songs.length - 1) { index = 0; } changeMusic(index); })

3.添加進度條。

music.addEventListener('loadedmetadata', function(event) { //提示音頻的元數據已加載 tTime.innerHTML = parseInt(music.duration / 60) + ':' + parseInt(music.duration % 60); }); music.addEventListener('timeupdate', function(event) { //監聽音樂事實播放事件 let jd = music.currentTime / music.duration; let bfb = jd * 100 + '%'; proBar.style.width = bfb; if (music.currentTime < 10) { cTime.innerHTML = '0:0' + Math.floor(music.currentTime); } else if (music.currentTime < 60) { cTime.innerHTML = '0:' + Math.floor(music.currentTime); } else { let minet = parseInt(music.currentTime / 60); let sec = music.currentTime - minet * 60; if (sec < 10) { cTime.innerHTML = '0' + minet + ':' + '0' + parseInt(sec); } else { cTime.innerHTML = '0' + minet + ':' + parseInt(sec); } } });

小功能：點擊進度條，音樂也跟著變化跳轉到指定的時間。

songPro.addEventListener('click', function(event) { let x = event.offsetX; let bfb = x / 610 * 100; proBar.style.width = bfb + '%'; music.currentTime = music.duration * bfb / 100; });

4.添加音量調節模塊。

全部JS代碼

這里我使用了{}作用域，讓let 或 const聲明的變量只在 let 或 const命令所在的代碼塊 {} 內有效，在 {} 之外不能訪問（ECMAScript 6(簡稱ES6)中新增的）。

{ let music = document.getElementById('music'); let playBtn = document.getElementById('playBtn'); let prevBtn = document.getElementById('prevBtn'); let nextBtn = document.getElementById('nextBtn'); let img = document.getElementById('img'); let sName = document.getElementById('sName'); let singer = document.getElementById('singer'); let tTime = document.getElementById('tTime'); let proBar = document.getElementById('proBar'); let cTime = document.getElementById('cTime'); let songPro = document.getElementById('songPro'); let vol = document.getElementById('vol'); let volCol = document.getElementById('volCol'); let volB = document.getElementById('volB'); let volText = document.getElementById('volText'); let songs = [{ mp3: 'music/01.mp3', singer: '趙薇', name: '不能和你分手', img: 'images/1.jpg' }, { mp3: 'music/04.mp3', singer: '陳粒', name: '易燃易爆炸', img: 'images/2.jpg' }, { mp3: 'music/06.mp3', singer: '胡夏/譚維維', name: '知否知否', img: 'images/3.jpg' }]; let changeMusic = function(index) { music.src = songs[index].mp3; img.src = songs[index].img; sName.innerHTML = songs[index].name; singer.innerHTML = songs[index].singer; proBar.style.width = 0; }; let index = 0; changeMusic(index); playBtn.addEventListener('click', function(event) { if (music.paused) { music.play(); event.currentTarget.innerHTML = ’<img src='http://www.gepszalag.com/bcjs/images/暫停.png' alt=''/>’; } else { music.pause(); event.currentTarget.innerHTML = ’<img src='http://www.gepszalag.com/bcjs/images/播放.png' alt=''/>’; } }); prevBtn.addEventListener('click', function(event) { //上一首 index--; if (index <= -1) { index = songs.length - 1; } changeMusic(index); }); nextBtn.addEventListener('click', function(event) { //下一首 index++; if (index > songs.length - 1) { index = 0; } changeMusic(index); }); music.addEventListener(’ended’,function () { //自動播放下一首 index++; if (index > songs.length - 1) { index = 0; } changeMusic(index); }) music.addEventListener('loadedmetadata', function(event) { //提示音頻的元數據已加載 tTime.innerHTML = parseInt(music.duration / 60) + ':' + parseInt(music.duration % 60); }); music.addEventListener('timeupdate', function(event) { //監聽音樂事實播放事件 let jd = music.currentTime / music.duration; //music.duration總時長 music.currentTime 當前時長 let bfb = jd * 100 + '%'; proBar.style.width = bfb; if (music.currentTime < 10) { cTime.innerHTML = '0:0' + Math.floor(music.currentTime); //Math.floor()向下取整 } else if (music.currentTime < 60) { cTime.innerHTML = '0:' + Math.floor(music.currentTime); } else { let minet = parseInt(music.currentTime / 60); //parseInt()解析一個字符串，并返回一個整數 let sec = music.currentTime - minet * 60; if (sec < 10) { cTime.innerHTML = '0' + minet + ':' + '0' + parseInt(sec); } else { cTime.innerHTML = '0' + minet + ':' + parseInt(sec); } } }); songPro.addEventListener('click', function(event) { let x = event.offsetX; let bfb = x / 610 * 100; proBar.style.width = bfb + '%'; music.currentTime = music.duration * bfb / 100; }); let getBfb = function(event) { let x = event.clientX; //返回當事件被觸發時鼠標指針向對于瀏覽器頁面（或客戶區）的水平坐標。 let volX = vol.getBoundingClientRect().x; //getBoundingClientRect()獲取元素的寬高位置 let disX = x - volX; disX = Math.max(0, disX); //返回最大數字 disX = Math.min(120, disX); //返回最小數字 return disX / 120; }; let setVol = function(event) { let bfb = Math.floor(getBfb(event) * 10000) / 100; volCol.style.width = bfb + '%'; volB.style.left = bfb + '%'; volText.innerHTML = Math.floor(bfb) + '%'; music.volume = bfb / 100; }; vol.addEventListener('mousedown', function() { document.addEventListener('mousemove', setVol); }); document.addEventListener('mouseup', function() { document.removeEventListener('mousemove', setVol); });}

最終效果展示：

原生JS實現音樂播放器

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。

JavaScript

上一條：js實現簡單的倒計時下一條：全面解析js中的原型,原型對象,原型鏈

相關文章：

1. 淺談SpringMVC jsp前臺獲取參數的方式 EL表達式2. 如何在jsp界面中插入圖片3. jsp實現登錄界面4. 怎樣才能用js生成xmldom對象，并且在firefox中也實現xml數據島？5. 基于javaweb+jsp實現企業車輛管理系統6. ASP.Net MVC利用NPOI導入導出Excel的示例代碼7. 利用ajax+php實現商品價格計算8. jstl 字符串處理函數9. Android通過Java sdk的方式接入OpenCv的方法10. python爬取新聞門戶網站的示例

排行榜

					
					淺談SpringMVC jsp前臺獲取參數的方式 EL表達式
如何在jsp界面中插入圖片
jsp實現登錄界面
怎樣才能用js生成xmldom對象，并且在firefox中也實現xml數據島？
基于javaweb+jsp實現企業車輛管理系統
利用ajax+php實現商品價格計算
ASP.Net MVC利用NPOI導入導出Excel的示例代碼
jstl 字符串處理函數
PHP擴展之URL編碼、解碼及解析——URLs
Android通過Java sdk的方式接入OpenCv的方法
基于php+MySql實現學生信息管理系統實例
				