js+audio实现音乐播放器
本文实例为大家分享了js+audio实现音乐播放器的具体代码，供大家参考，具体内容如下音乐播放器 * { 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");// 定义数组存音频相关资料var music_src = ["1.mp3", "2.mp3", "3.mp3", "4.mp3"];var music_title = ["白举纲-绅士（live）", "魔鬼中的天使", "下个路口见", "大鱼"];// 进行初始化音频audio1.src = "audio/" + music_src;music_name.innerText = music_title;// 按钮是点击事件play.onclick = function() { move1(); // 播放或暂停};prev.onclick = function() { prev1(); // 上一曲，播放 move1();}next.onclick = function() { next1(); // 下一曲，播放 move1(); } // 下一曲的函数var next1 = function() { // 索引+1，初始化改变后的音乐播放界面 if (index == music_src.length - 1) {index = 0; } else {index++; } audio1.src = "audio/" + music_src; music_name.innerText = music_title; } // 上一曲的函数var prev1 = function() { // 索引-1，初始化改变后的音乐播放界面 if (index == 0) {index = music_src.length - 1; } else {index--; } audio1.src = "audio/" + music_src; music_name.innerText = music_title; } // 暂停与播放的函数var move1 = function() { // 判断现在是不是在播放 if (audio1.paused) { // 没有，播放音乐，改变按钮样式，改变进度条audio1.play();play.src = "img/play.png";timer = setInterval(function() { // 每500毫秒执行一次var drtTime = audio1.duration; // 得到音频总时间（如果不放在定时器中会出现下一曲，暂停播放，进度条来回跳动）var curTime = audio1.currentTime; // 获取音频当前播放时间line1.style.width = (curTime / drtTime) * 100 + "%"; // 计算出进度条的长度if (drtTime==curTime) { next.onclick();}console.log(drtTime,curTime);}, 500); } else { // 播放，关闭音乐，关闭按钮图标audio1.pause();play.src = "img/pause.png";clearInterval(timer); } } // 拖动进度条改变播放进度var flag = false; // 标记var mx = null; // 距离line2.onmousedown = function(event) { // 改变状态 flag = true; // 按下鼠标获取距离 mx = event.pageX - line2.offsetLeft; clearInterval(timer);}document.body.onmousemove = function(event) { // 当状态为true时可以获取 if (flag) {// 滑块的位置=当前鼠标位置-距离var x1 = event.pageX - mx;// 进度条当前长度=滑块位置-进度条的开始坐标值var x2 = x1 - line1.offsetLeft;// 用进度条当前长度/进度条总长度得到一个小数var x3 = x2 / 295;// 取到小数点后3位var x4 = x3.toFixed(3);if (x4 >= 0 && x4 < 1) {// 当百分比在0--1之间时才改变进度条长度line1.style.width = x4 * 100 + "%";}else if (x4 == 1) {next.onclick();} } } // 放开鼠标时，状态改变，当前播放时间改变，启动定时器继续工作document.body.onmouseup = function(event) { flag = false; // 状态改变 var x5 = parseInt(line1.style.width) / 100; // 得到当前进度条的百分比 var drtTime = audio1.duration; // 得到音频总时间 audio1.currentTime = (drtTime * x5).toFixed(0); // 改变当前播放时间 timer = setInterval(function() { // 定时器重启成功 var curTime = audio1.currentTime; line1.style.width = (curTime / drtTime) * 100 + "%"; }, 500);}相关图片
http://www.cbvy.com//data/attachment/forum/202009/15/103202w5lm5qkn1bn5gb11.jpg
http://www.cbvy.com//data/attachment/forum/202009/15/103204agguqbuuqovbg6ww.png
http://www.cbvy.com//data/attachment/forum/202009/15/103207d94ssmlo4l5fmm0a.png
http://www.cbvy.com//data/attachment/forum/202009/15/103207lr78w7zmo1m6jlul.png
http://www.cbvy.com//data/attachment/forum/202009/15/103208oqiof22v2n6p777y.png
http://www.cbvy.com//data/attachment/forum/202009/15/103208vk314018hjd97l8r.png
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持咔叽论坛。
原文地址：https://www.jb51.net/article/195512.htm
页:
[1]