js+audio实现音乐播放器

本文实例为大家分享了js+audio实现音乐播放器的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>音乐播放器</title><link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"img/an.ico\" /><link rel=\"stylesheet\" type=\"text/css\" href=\"css/music_Play.css\" /></head><body><div class=\"music_bg\"><div class=\"music_cont\"><audio id=\"audio1\" src=\"\"></audio><div class=\"music_ctrl\"><div class=\"music_btn\"><div class=\"btn prev\"><img id=\"prev\" src=\"img/prev.png\" /></div><div class=\"btn play\"><img id=\"play\" src=\"img/pause.png\" /></div><div class=\"btn next\"><img id=\"next\" src=\"img/next.png\" /></div></div><div class=\"music_name\" id=\"music_name\"></div></div><div class=\"music_line\"><div class=\"line1\" id=\"line1\"></div><div class=\"line2\" id=\"line2\"></div></div></div></div></body><script src=\"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\");// 定义数组存音频相关资料var music_src = [\"1.mp3\", \"2.mp3\", \"3.mp3\", \"4.mp3\"];var music_title = [\"白举纲-绅士（live）\", \"魔鬼中的天使\", \"下个路口见\", \"大鱼\"];// 进行初始化音频audio1.src = \"audio/\" + music_src[index];music_name.innerText = music_title[index];// 按钮是点击事件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[index];music_name.innerText = music_title[index];}// 上一曲的函数var prev1 = function() { // 索引-1，初始化改变后的音乐播放界面if (index == 0) {index = music_src.length - 1;} else {index--;}audio1.src = \"audio/\" + music_src[index];music_name.innerText = music_title[index];}// 暂停与播放的函数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);}

相关推荐

热门文章

热门标签

回顶部