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 相关文章推荐
asp批量修改记录的代码
Jun 25 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
获取jqGrid中选择的行的数据
Nov 30 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
快速了解Node中的Stream流是什么
Feb 13 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 Javascript
详解JS数组方法
Nov 20 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
PHP 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
javascript十六进制及二进制转化的方法
2015/05/06 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
解析Vue 2.5的Diff算法
2017/11/28 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
工作中常用js功能汇总
2020/11/07 Javascript
Python实现的简单文件传输服务器和客户端
2015/04/08 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
解读python logging模块的使用方法
2018/04/17 Python
python下的opencv画矩形和文字注释的实现方法
2019/07/09 Python
Python3内置模块random随机方法小结
2019/07/13 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
办公室内勤工作职责
2013/12/11 职场文书
环保建议书100字
2014/05/14 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android