JavaScript实现音乐播放器


Posted in Javascript onAugust 14, 2022

本文实例为大家分享了vue + element ui实现锚点定位的具体代码,供大家参考,具体内容如下

效果

JavaScript实现音乐播放器

HTML代码

<!--播放器-->
<div id="player">
    <!--播放控件-->
    <div id="playerControl">
        <div class="playerImg">
            <img src="../images/demo3/1.jpg" alt="" width="150" height="150">
            <audio id="audio">
                <source src="../video/1.mp3">
            </audio>
        </div>
        <div id="pcontrol" class="clearfix">
            <button class="prev" title="上一曲"></button>
            <button id="play" class="play1" title="播放"></button>
            <button class="next" title="下一曲"></button>
            <button class="stop" title="停止"></button>
        </div>
    </div>
    <!--播放进度-->
    <div id="progrees">
        <div id="curProgrees"></div>
    </div>
    <!--播放时间-->
    <div id="playTime">
        <span id="presentTime">00 : 00</span>
        <span>/</span>
        <span id="totalTime">00 : 00</span>
    </div>
    <!--音频列表-->
    <div id="playerList">
        <ul>
            <li class="active">
                <span class="mr10">1</span>
                <span>Mascara</span>
                <span>-</span>
                <span>G.E.M. 邓紫棋</span>
            </li>
            <li>
                <span class="mr10">2</span>
                <span>西安人的歌</span>
                <span>-</span>
                <span>范炜与程渤智</span>
            </li>
            <li>
                <span class="mr10">3</span>
                <span>往后余生</span>
                <span>-</span>
                <span>李贰叁</span>
            </li>
        </ul>
    </div>
</div>

Css代码

*{margin:0; padding:0;}
.bd{border:1px solid red;}
.fl{float: left}
.fr{float:right}
.mr10{margin-right:10px;}
ul{list-style: none;}
.clearfix:after{content: ""; height:0; line-height: 0; visibility: hidden;display: block; clear:both;}
body{background:#262626; padding:50px 0; color:#fff; }
 
#player{width:600px; height:400px; background:#130519de;margin:0 auto;}
#playerControl{position:relative;height:200px;}
#playerControl .playerImg{padding:25px; box-sizing: border-box;}
 
/*播放控制界面*/
#pcontrol{position: absolute;left:300px; top:85px;}
#pcontrol button{float:left;margin:0 10px;border:0;outline: none; width:28px; height:28px;background:url("../../images/demo3/player.png") no-repeat}
 
/*暂停*/
#pcontrol .play1{background-position: -8px -8px}
#pcontrol .play1:hover{background-position: -49px -8px}
 
/*播放*/
#pcontrol .play2{background-position: -8px -49px}
#pcontrol .play2:hover{background-position: -49px -49px}
 
/*上一曲*/
#pcontrol .prev{background-position: 0 -112px}
#pcontrol .prev:hover{background-position: -30px -112px}
 
/*下一曲*/
#pcontrol .next{background-position: 0 -141px}
#pcontrol .next:hover{background-position: -30px -141px}
/*停止播放*/
#pcontrol .stop{background-position: 0 -84px}
#pcontrol .stop:hover{background-position: -30px -84px}
 
/*播放列表*/
#playerList{padding:20px 0px}
#playerList ul li{padding:10px 20px; }
#playerList ul li.active,#playerList ul li:hover{background:rgba(0, 0, 0, .4);color:#665975;cursor: pointer}
 
/*播放进度*/
#progrees{width:550px; height:5px; background:#ccc; margin:0 auto;}
#curProgrees{width:0px; height:100%; background:darkolivegreen;}
 
/*播放时间*/
#playTime{padding:10px 25px 0px; text-align: right;}

Js功能代码

window.onload = function (ev) {
    //获取元素
        var play = document.querySelector("#play");//播放按钮
        var audio = document.querySelector("#audio");//音频文件
        var next = document.querySelector(".next");//下一曲
        var prev = document.querySelector(".prev");//上一曲
        var stop = document.querySelector(".stop");//停止
        var playerListLi = playerList.querySelectorAll("li")//播放列表li
        var totalTime = document.querySelector("#totalTime");//总时间
        var presentTime = document.querySelector("#presentTime");//当前时间
 
    //歌曲地址
        var playerMusic = ["../video/1.mp3","../video/2.mp3","../video/3.mp3"];
 
    //1. 点击播放歌曲,再次点击播放暂停
        play.addEventListener("click",startPlay);
    //2.点击切换下一曲
        next.addEventListener("click",theNext);
    //3.点击切换上一曲
        prev.addEventListener("click",thePrev);
    //4.点击停止播放
        stop.addEventListener("click",stopPlay);
 
 
 
    //定义播放函数
        //1.1 定义标杆,判断是否播放歌曲
        var flag = true;
        function startPlay(){
            if(flag){
                play.className="play2";
                play.title = "暂停";
                audio.play();
                //播放进度
                playProgress();
                //播放时间
                playTime();
            }else{
                play.className="play1";
                play.title = "播放";
                audio.pause();
            }
            flag = !flag;
        }
    //定义下一曲
        var n = 0;//定义歌曲索引
        function theNext(){
            n++;
            if(n == playerMusic.length){
                n = 0;
            }
            audio.src = playerMusic[n];
            //歌曲播放
            flag = true;
            startPlay();
            //切换列表
            switchList();
        }
    //定义下一曲
        function thePrev(){
            n--;
            if(n < 0){
                n = playerMusic.length - 1;
            }
            audio.src = playerMusic[n];
            //歌曲播放
            flag = true;
            startPlay();
            //切换列表
            switchList();
        }
    //切换列表
        function switchList(){
            for(var i=0; i<playerListLi.length; i++){
                playerListLi[i].className = "";
            }
            playerListLi[n].className = "active";
        }
    //停止播放
        function stopPlay(){
            //设置当前播放时间为0;,并暂停播放
            audio.currentTime = 0;
            flag = false;
            startPlay();
        }
 
    //播放进度
        function playProgress(){
            //定义计时器
            var timer = null;
            if(flag){
                //开启计时器
                timer = setInterval(function(){
                    if(audio.currentTime >= audio.duration){
                        curProgrees.style.width = progrees.offsetWidth + "px";
                        clearInterval(timer);
                        theNext();
                    }else{
                        curProgrees.style.width = (audio.currentTime/audio.duration)*progrees.offsetWidth + "px";
                    }
 
                },30);
            }else{
                //关闭计时器
                clearInterval(timer);
            }
 
        }
    //播放时间
        function playTime(){
            //当前时间
            var timer2 = null;
            if(flag){
                timer2 = setInterval(function(){
                    //总时间
                    setTime(audio.duration,totalTime);
                    setTime(audio.currentTime,presentTime);
                },1000)
            }else{
                clearInterval(timer2)
            }
        }
    //设置时间
        function setTime(audioTime,obj){
            //总时间
            allMinute = Math.floor(audioTime/60);
            if(allMinute<10){
                allMinute = "0" + allMinute;
            }
            allSecond = Math.floor(audioTime%60);
            if(allSecond<10){
                allSecond = "0" + allSecond;
            }
            var allTime = allMinute + " : " + allSecond;
            obj.innerHTML = allTime;
        }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
EditPlus 正则表达式 实战(3)
Dec 15 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
AngularJS 教程及实例代码
Oct 23 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 #Vue.js
vue实现input输入模糊查询的三种方式
Aug 14 #Vue.js
输入框跟随文字内容适配宽实现示例
Aug 14 #Javascript
JS开发前端团队展示控制器来为成员引流
Aug 14 #Javascript
JS实现页面炫酷的时钟特效示例
Rust中的Struct使用示例详解
Aug 14 #Javascript
使用Cargo工具高效创建Rust项目
Aug 14 #Javascript
You might like
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
javascript正则表达式中的replace方法详解
2015/04/20 Javascript
javascript中Date()函数在各浏览器中的显示效果
2015/06/18 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
[49:20]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
用Python和MD5实现网站挂马检测程序
2014/03/13 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python实现遍历数据库并获取key的值
2015/05/17 Python
Python之Scrapy爬虫框架安装及简单使用详解
2017/12/22 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python贪心算法实例小结
2018/04/22 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python实现密码强度校验
2020/03/18 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
美国精油公司:Plant Therapy
2019/05/17 全球购物
初中班级口号
2014/06/09 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书
党员教师群众路线思想汇报范文
2014/10/28 职场文书
教师群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
SQL Server连接查询的实用教程
2021/04/07 SQL Server
Python实现抖音热搜定时爬取功能
2022/03/16 Python