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 相关文章推荐
JS 事件绑定函数代码
Apr 28 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
js实现选中页面文字将其分享到新浪微博
Nov 05 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
layui前段框架日期控件使用方法详解
May 19 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
vue-cli项目中使用echarts图表实例
Oct 22 Javascript
解决removeEventListener 无法清除监听的问题
Oct 30 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和ACCESS写聊天室(三)
2006/10/09 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
2018/03/08 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
python dict remove数组删除(del,pop)
2013/03/24 Python
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
浅谈python输出列表元素的所有排列形式
2020/02/26 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
区三好学生主要事迹
2014/01/30 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
红色故事演讲稿
2014/05/22 职场文书
团队会宣传标语
2014/10/09 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
2014年教务处工作总结
2014/12/03 职场文书
入党后的感想
2015/08/10 职场文书
Python使用海龟绘图实现贪吃蛇游戏
2021/06/18 Python
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL