js+audio實(shí)現(xiàn)音樂播放器
本文實(shí)例為大家分享了js+audio實(shí)現(xiàn)音樂播放器的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title>音樂播放器</title> <link rel='shortcut icon' type='image/x-icon' href='http://m.cgvv.com.cn/bcjs/img/an.ico' /> <link rel='stylesheet' type='text/css' href='http://m.cgvv.com.cn/bcjs/css/music_Play.css' /> </head> <body> <div class='music_bg'> <div class='music_cont'> <audio src='http://m.cgvv.com.cn/bcjs/14412.html'></audio> <div class='music_ctrl'> <div class='music_btn'> <div class='btn prev'> <img src='http://m.cgvv.com.cn/bcjs/img/prev.png' /> </div> <div class='btn play'> <img src='http://m.cgvv.com.cn/bcjs/img/pause.png' /> </div> <div class='btn next'> <img src='http://m.cgvv.com.cn/bcjs/img/next.png' /> </div> </div> <div id='music_name'></div> </div> <div class='music_line'> <div id='line1'></div> <div id='line2'></div> </div> </div> </div> </body> <script src='http://m.cgvv.com.cn/bcjs/js/audio_play.js' type='text/javascript' charset='utf-8'></script></html>
* { margin: 0; padding: 0; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;}body { overflow-x: hidden;}.music_bg { width: 100%; height: 666px; position: absolute; background-image: url(../img/bj.jpg); background-position: center; background-size: cover; background-repeat: no-repeat;}.music_cont { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -150px; background-color: #000; border-radius: 10px; box-shadow: #000000 5px 5px 30px 5px}.music_line { width: 300px; height: 20px; overflow: hidden; position: absolute; top: 30%;}.line1 { width: 0%; height: 60%; float: left; margin-top: 1%; margin-right: -2px; background-color: rgba(255, 255, 255, 0.9);}.line2 { background-image: url(../img/point.png); height: 100%; background-repeat: no-repeat; width: 10px; background-position: center; float: left; cursor: pointer; margin-left: -4px; margin-right: -4px;}.music_ctrl { width: 300px; height: 200px; position: absolute; bottom: 0; background-color: #8c3232;}.music_btn { width: 300px; height: 100px; position: relative;}.btn { width: 33.33%; float: left; height: 40px; margin-top: 50px;}.prev img { float: right; margin: 10px 0px; cursor: pointer;}.play img { margin: 2px 35px; cursor: pointer;}.next img { float: left; margin: 10px 0px; cursor: pointer;}.music_name { width: 300px; height: 100px; position: relative; text-align: center; line-height: 100px; color: #fff; font-size: 18px;}
// 定義索引和定時器var index = 0, timer = null;// 獲取到要操作的對象var prev = document.getElementById('prev');var play = document.getElementById('play');var next = document.getElementById('next');var audio1 = document.getElementById('audio1');var music_name = document.getElementById('music_name');var line1 = document.getElementById('line1');var line2 = document.getElementById('line2');// 定義數(shù)組存音頻相關(guān)資料var music_src = ['1.mp3', '2.mp3', '3.mp3', '4.mp3'];var music_title = ['白舉綱-紳士（live）', '魔鬼中的天使', '下個路口見', '大魚'];// 進(jìn)行初始化音頻audio1.src = 'http://m.cgvv.com.cn/bcjs/audio/' + music_src[index];music_name.innerText = music_title[index];// 按鈕是點(diǎn)擊事件play.onclick = function() { move1(); // 播放或暫停};prev.onclick = function() { prev1(); // 上一曲，播放 move1();}next.onclick = function() { next1(); // 下一曲，播放 move1(); } // 下一曲的函數(shù)var next1 = function() { // 索引+1，初始化改變后的音樂播放界面 if (index == music_src.length - 1) { index = 0; } else { index++; } audio1.src = 'http://m.cgvv.com.cn/bcjs/audio/' + music_src[index]; music_name.innerText = music_title[index]; } // 上一曲的函數(shù)var prev1 = function() { // 索引-1，初始化改變后的音樂播放界面 if (index == 0) { index = music_src.length - 1; } else { index--; } audio1.src = 'http://m.cgvv.com.cn/bcjs/audio/' + music_src[index]; music_name.innerText = music_title[index]; } // 暫停與播放的函數(shù)var move1 = function() { // 判斷現(xiàn)在是不是在播放 if (audio1.paused) { // 沒有，播放音樂，改變按鈕樣式，改變進(jìn)度條 audio1.play(); play.src = 'http://m.cgvv.com.cn/bcjs/img/play.png'; timer = setInterval(function() { // 每500毫秒執(zhí)行一次 var drtTime = audio1.duration; // 得到音頻總時間（如果不放在定時器中會出現(xiàn)下一曲，暫停播放，進(jìn)度條來回跳動） var curTime = audio1.currentTime; // 獲取音頻當(dāng)前播放時間 line1.style.width = (curTime / drtTime) * 100 + '%'; // 計(jì)算出進(jìn)度條的長度 if (drtTime==curTime) { next.onclick(); } console.log(drtTime,curTime); }, 500); } else { // 播放，關(guān)閉音樂，關(guān)閉按鈕圖標(biāo) audio1.pause(); play.src = 'http://m.cgvv.com.cn/bcjs/img/pause.png'; clearInterval(timer); } } // 拖動進(jìn)度條改變播放進(jìn)度var flag = false; // 標(biāo)記var mx = null; // 距離line2.onmousedown = function(event) { // 改變狀態(tài) flag = true; // 按下鼠標(biāo)獲取距離 mx = event.pageX - line2.offsetLeft; clearInterval(timer);}document.body.onmousemove = function(event) { // 當(dāng)狀態(tài)為true時可以獲取 if (flag) { // 滑塊的位置=當(dāng)前鼠標(biāo)位置-距離 var x1 = event.pageX - mx; // 進(jìn)度條當(dāng)前長度=滑塊位置-進(jìn)度條的開始坐標(biāo)值 var x2 = x1 - line1.offsetLeft; // 用進(jìn)度條當(dāng)前長度/進(jìn)度條總長度得到一個小數(shù) var x3 = x2 / 295; // 取到小數(shù)點(diǎn)后3位 var x4 = x3.toFixed(3); if (x4 >= 0 && x4 < 1) { // 當(dāng)百分比在0--1之間時才改變進(jìn)度條長度 line1.style.width = x4 * 100 + '%'; }else if (x4 == 1) { next.onclick(); } } } // 放開鼠標(biāo)時，狀態(tài)改變，當(dāng)前播放時間改變，啟動定時器繼續(xù)工作document.body.onmouseup = function(event) { flag = false; // 狀態(tài)改變 var x5 = parseInt(line1.style.width) / 100; // 得到當(dāng)前進(jìn)度條的百分比 var drtTime = audio1.duration; // 得到音頻總時間 audio1.currentTime = (drtTime * x5).toFixed(0); // 改變當(dāng)前播放時間 timer = setInterval(function() { // 定時器重啟成功 var curTime = audio1.currentTime; line1.style.width = (curTime / drtTime) * 100 + '%'; }, 500);}
相關(guān)圖片
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 使用css實(shí)現(xiàn)全兼容tooltip提示框2. div的offsetLeft與style.left區(qū)別3. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)4. Vue3使用JSX的方法實(shí)例(筆記自用)5. JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析6. 詳解CSS偽元素的妙用單標(biāo)簽之美7. CSS代碼檢查工具stylelint的使用方法詳解8. 利用CSS3新特性創(chuàng)建透明邊框三角9. vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程10. 不要在HTML中濫用div
網(wǎng)公網(wǎng)安備