音乐播放器的设计与实现 功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换，运行效果如图所示

最新推荐文章于 2021-12-08 21:59:40 发布
最新推荐文章于 2021-12-08 21:59:40 发布
阅读量3.6k 收藏 38
点赞数 14
文章标签： javascript css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/daddykei/article/details/105883680
版权

在这里插入图片描述
本地资源在谷歌浏览器上是无法快进的。这个是重点!!!有很多解决方法，我直接用火狐就ok了
https://www.gaitubao.com/# 改图宝链接 用于修改歌曲头像 大小标准显示才正常 我用的大小为300，300
我用的图标全都来自iconfont Iconfont-阿里巴巴矢量图标库
贴上代码 每一行都有注释 包括命名 有问题 欢迎评论 或者询问 QQ1099256274

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .musicPlayer{
            width: 670px;
            height: 400px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
            border: 2px #006558 solid;
            border-radius: 20px;
        }
        .musicInfo{ /*进度条上面一块的区域*/
            height: 200px;
           text-align: center;
        }
        .musicImg{
            width: 200px;
            height: 200px;
            border: 2px #fff solid;
            text-align: center;
            margin:0 auto; /*// text-align: center;margin:0 auto;  搭配实现居中*/
            overflow: hidden;
            border-radius: 100%;
            top: 20px;
            animation: aidemolizhuanquanquan 180s infinite linear; /*爱的魔力转圈圈*/
        }
        @keyframes aidemolizhuanquanquan {
            0%{transform: rotate(0deg);}
            100%{transform: rotate(360deg);}
        }
        .musicName{
            color: black;
          text-align: center;
        }
        .musicName div{ /*写这个是为了   让当前播放（这几个字固定的）  ： 后面的名字 （是要更改的）*/
            display: inline-block;
        }
        .time{
            margin-top: 10px;
            font-size: 14px;
            line-height: 1.50;
            color: black;
        }
        .jdt-left{
            float: left;
        }
        .jdt-right{
            float: right;
        }
        .jdt{
            margin-left: 30px;
            margin-right: 30px;
        }
        .jdt_1{
            width: 100%;
            height: 8px;
            border-radius: 10px;
            background-color: #ccc;
            margin-top: 5px;
            overflow: hidden;
        }
        .jdt_color{
            height: 10px;
            width: 30%;
            pointer-events: none;
            background-color: #709a70;
        }
        .vol{
            position: absolute;
            width: 100px;
            height: 4px;
            top: 50%;
            right: 55px;
            margin-top: -2px;
            border-radius: 10px;
            background-color: #ccc;
        }
        .vol>img{
            width: 25px;
            height: 25px;
            margin-left: -135px;
            margin-top: -30px;
        }
        .vol_color{
            width: 100%;
            height: 4px;
            background-color: #709a70;
            margin-top: -17px;
            pointer-events: none;
        }
        .vol_blok{
            position: absolute;
            width: 7px;
            height: 7px;
            background-color: #709a70;
            border-radius: 100%;
            left: 100%;
            top: 50%;
            pointer-events: none;
            margin-top: -3.5px;
        }
        .text{
            color: black;
            position: absolute;
            right: 10px;
            top:50%;
            margin-top: -8px;
        }
        .ctrls{
            text-align: center;
            margin-top: 10px;
            position: relative;
        }
        .nextBtn,.preBtn,#bofang,#zanting {
            display: inline-block;
            width: 30px;
            height: 30px;
        }
            .yipai div{
                 width: 30px;
                 height: 30px;
                 display: inline-block;
              }/*让按钮站到一排去*/
    </style>
</head>
<body>
<!--音乐播放器-->
<div class="musicPlayer">
    <div class="musicInfo"><!--进度条上面一块的区域-->
        <div class="musicImg" id="musicImg"> <!--歌曲图片-->
            <img src="./music/sky.jpg" id="musicpic">
        </div>
    </div>
      <!--进度条-->
    <div class="jdt">
        <span class="jdt-left time" id="jdtLeft">00:00</span>
        <span class="jdt-right time" id="jdtRight">00:00</span>
        <div class="clears"></div>

        <div class="jdt_1" id="gequJDBar">
            <div class="jdt_color" id="gequjd">
            </div>
        </div>
        <!--进度条 end-->
        <!--控制按钮-->
        <div class="musicName">
            <div>当前正在播放:</div> <div><h1 id="sname">歌曲名称</h1></div>
        </div>
        <div class="ctrls" id="ctrls">

            <div class="yipai"><!--这个诡异的命名是为了让前进后退暂停三个图片在同一排 拼音一排哈哈哈-->
         <div> <img class="preBtn" id="preBtn" src="music/后退%20(1).png"></div>
            <div> <img  id="bofang" onclick="play()" src="music/暂停.png" alt="">
                <img  id="zanting"  onclick="pause()" src="music/暂停%20(1).png" alt=""></div>
            <div> <img class="nextBtn" id="nextBtn" src="music/前进.png"></div>
        </div>
            <!--音量控制-->
            <div class="vol" id="volJd">
                <img src="music/音量.png">
                <div class="vol_color" id="volColor"></div>
                <div class="vol_blok" id="volBlok"></div>
            </div>
            <!--音量控制 end-->
            <!--音量显示百分比-->
            <div class="text" id="text">
                100%
            </div>
            <!--音量显示百分比  end-->

        <!--控制按钮 end-->
    </div>

    <audio src="#" id="music"></audio>
</div>

<!--音乐播放器 end-->
<script >

        //找标签
        let music=document.getElementById("music");
        let preBtn=document.getElementById("preBtn");
        let nextBtn=document.getElementById("nextBtn");
        let sname=document.getElementById("sname");
        let musicpic=document.getElementById("musicpic");
        let jdtRight=document.getElementById("jdtRight");  //进度条的左右
        let jdtLeft=document.getElementById("jdtLeft");
         let gequjd=document.getElementById("gequjd");// 歌曲进度
        let gequJDBar=document.getElementById("gequJDBar");
        let volJd=document.getElementById("volJd");  //音量进度
        let volColor=document.getElementById("volColor"); //音量颜色
        let volBlok=document.getElementById("volBlok");
        let musicImg=document.getElementById("musicImg");
        let text=document.getElementById("text");
        var bf= document.getElementById('bofang');
        var zt =document.getElementById('zanting');

        //歌曲  用自己的路径和图片就好啦
        let songs=[{
            mp3:"./music/Serenade.mp3",
            name:"Serenade",
            img:"./music/sky.jpg",
        },
            {
                mp3:"./music/月光下的云海.mp3",
                name:"月光下的云海",
                img:"./music/1.jpg",
            },
            {
                mp3:"./music/EndlessHorizon.mp3",
                name:"EndlessHorizon",
                img:"./music/sky.jpg",
            }];
        //切歌函数
        let changeMusic=function (index) {
            music.src=songs[index].mp3;//换歌曲
            musicpic.src=songs[index].img;//换图片
            sname.innerHTML=songs[index].name;//换名称
            gequjd.style.width=0;//切歌时进度归0
        };
        //默认加载第一首歌
        let index=0;//当前播放歌曲索引
        changeMusic(index);
        //播放按钮
        pause();
        // 暂停 播放 按钮切换
        function play () {
            music.play();
            bf.style.display='none';
            zt.style.display="block"}
        function pause () {
            music.pause();
            zt.style.display='none';
            bf.style.display="block"}
        //切歌
        preBtn.addEventListener("click",function (event) {
            index--;
            if(index<=-1){
                index=songs.length-1;
            }
            changeMusic(index);
        });
        nextBtn.addEventListener("click",function (event) {
            index++;
            if(index>songs.length-1){
                index=0;
            }
            changeMusic(index);
        });
        //转换时间
        function setTime(x, times) {
            if (times < 10) {
                x.innerHTML = "0:0" + Math.floor(times);
            } else if (times < 60) {
                x.innerHTML = "0:" + Math.floor(times);
            } else {
                let minute = parseInt(times / 60);
                let second = times - minute * 60;
                if (second < 10) {
                    x.innerHTML = "0" + minute + ":" + "0" + parseInt(second);
                }
                else {
                    x.innerHTML = "0" + minute + ":" + parseInt(second);
                }
            }
        }
        //歌曲事件
        //元数据加载，显示总时长  duration 属性获得当前视频的长度：
        music.addEventListener("loadedmetadata",function (event) {
            let times = music.duration;
            setTime(jdtRight, times);
        });
        //当歌曲可以播放的。切歌的时候就能播放
        music.addEventListener("canplay",function (event) {
            music.play();
        });
        //时间更新事件，歌曲顺利播放的时候，更新进度条和当前的时间
        music.addEventListener("timeupdate",function (event) {
            let jd=music.currentTime/music.duration;//0-1的小数
            let bfb=jd*100+"%";
            gequjd.style.width=bfb;
            let times = music.currentTime;
            setTime(jdtLeft, times);
        });
        //歌曲进度条拖动
        gequJDBar.addEventListener("click",function (event) {
            let x=event.offsetX;//获取鼠标所在位置
            let bfb=x/610*100;
            gequjd.style.width=bfb+"%";
            music.currentTime=music.duration*+bfb/100;
        });
        //音量控制拖动
        let setVol=function(event){
            let x=event.offsetX;//获取音量当前的位置
            console.log(x); // 打印输出当前音量值
            let bfb=x/100*100;
            volColor.style.width=bfb+"%";
            volBlok.style.left=bfb+"%";
            text.innerHTML = bfb+"%" ;
            music.volume=bfb/100;    //volume 属性设置或返回音频的音量，从 0.0 (静音) 到 1.0 (最大声)。
        };
        volJd.addEventListener("click",function (event) {
            setVol(event);
        });
        volJd.addEventListener("mousedown",function (event) {
            volJd.addEventListener("mousemove",setVol);
        });
        volJd.addEventListener("mouseup",function (event) {
            volJd.removeEventListener("mousemove",setVol);
        });
        // 播放完毕，自动下一首
        music.addEventListener("ended",function(){
            nextBtn.click();
        });
</script>
</body>
</html>
thinkasany
关注
  • 14
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
【HTML5媒体API项目】-音乐播放器的设计与实现
代号006
08-29 2594
设计一款基于H5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首的切换。
用html5写一个音乐播放器
最新发布
canduecho的专栏
08-27 5086
这只是一个简单的示例，你可以根据你的需求进一步自定义和扩展播放器的功能。如果你希望实现更复杂的音乐播放器，可能需要使用一些现成的音频播放器库或框架。如果你想要增加更多的功能，如自定义样式、播放列表、自动播放等，你可能需要使用JavaScript来操作音频元素。在上面的示例中，我们使用了自定义的样式来布局播放器，并添加了自定义的播放和暂停按钮，通过JavaScript代码实现了播放和暂停功能。在HTML5中创建一个简单的音乐播放器时，你可以使用``元素来实现。音乐播放器
html-----简易版音乐播放器
qq_52924791的博客
12-08 9344
html-----音乐播放器 1.功能要求：设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换。 2.界面设计要求： 仿CD图像 音量调节进度条 歌曲名称显示 音乐播放器的相关按钮 2.1 仿CD图像：利用border-radius设置圆边角（这张图片必须是正方形图片不然不会是圆形的图片） #CDimage img{ border-radius:50%; } 2.2音量调节：使用input可以调节音量 <!--音量调节进度条--> &l
音乐播放器的设计与实现
YQEMMMM的博客
10-23 5790
音乐播放器的设计与实现 功能要求： 设计一款基于HTML5音频技术的音乐播放器，要求实现音乐的播放、暂停、音量大小调节、上一首和下一首切换。 实现效果图：
HTML5+CSS3实现的列表式音乐播放器特效源码
11-07
在这个音乐播放器中，`<audio>`标签用于定义音乐文件，通过设置其属性如src（源文件）、controls（显示播放控制）等，可以实现播放、暂停、音量控制等功能。 CSS3（Cascading Style Sheets的第三版）则负责页面的...
基于vue-element组件实现音乐播放器功能
08-27
"基于vue-element组件实现音乐播放器功能" 本篇文章主要介绍了如何使用 Vue.js 框架和 Element 组件库来实现一个音乐播放器的功能。该播放器可以播放音乐、调整音量、显示进度条等功能。 首先，文章中使用了 ...
html5笑脸音乐播放器特效
04-06
HTML5笑脸音乐播放器特效是一种基于HTML5技术的交互式音乐播放器设计，它结合了视觉吸引力和功能实用性。在现代网页设计中，HTML5已经成为不可或缺的部分，尤其在多媒体元素的处理上，如音频和视频播放。这款播放器...
一个简单的网页在线音乐播放器，通过Vue+axios获取音乐开放接口并实现网页在线播放 Music 或 MV 功能
02-09
本项目采用Vue.js作为前端框架，axios作为数据请求库，结合音乐开放接口来实现实时获取音乐资源，从而创建了一个简单但功能完备的在线音乐播放平台。 Vue.js是目前非常流行的一种轻量级JavaScript框架，它提供了...
HTML5 MP3音乐播放器代码
06-24
HTML5 MP3音乐播放器是一种基于现代Web标准的音频播放解决方案，它利用HTML5的`<audio>`标签来实现在线音频播放功能。这种播放器通常设计为轻便且可自定义，可以无缝集成到各种网站中，为用户提供方便的音乐体验。在...
使用HTML5实现音乐播放
05-12
一个在线音频播放器；可实现音乐列表点播；具备播放、停止、音量调节、播放进度显示等功能。
HTML5实现超酷的可暂停音频播放器特效源码
09-08
是一段实现了超酷的可以在网页中播放音频的效果代码，同时，本款音频播放器还实现了暂停播放、点击快进、音量调节的效果.
基于HTML5下的音乐播放器
04-12
基于HTML5下的音乐播放器的论文这篇论文针对这一点，对HTML5的视频播放功能进行挖掘，主要运用了HTML5中的video 标签。
html5 audiojs网页音乐播放器-控制音乐开关声音和获取文件名
10-24
html5 audiojs控制音乐开关声音和获取文件名_网页音乐播放器代码
网页音乐播放器的设计与开发（报告书）
04-07
结合需求分析来看，整个设计是个简单的小系统，根据用户需求设置了几个简单的实现基本操作的链接，分别是登陆、播放器主界面、搜索、小标签、文件下载等。该播放器设置了一个窗口，先由刚打开网页时候的初始化欢迎界面，作为一个向导界面。 当用户进入播放器主界面时，可以查看歌词，播放上一首或者下一首歌曲，暂停歌曲等。在为你推荐歌曲栏目中，可以查看推荐歌曲的歌手名称，以及歌曲时长。
html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc
weixin_30382147的博客
06-03 1288
基于HTML5技术的音乐播放器的设计与实现基于HTML5技术的音乐播放器的设计与实现常志强 刘正余 杨劲楠皖西学院电子与信息工程学院X关注成功！加关注后您将方便地在 我的关注中得到本文献的被引频次变化的通知！新浪微博腾讯微博人人网开心网豆瓣网网易微博摘????要：本文采用HTML5技术, 设计了一款音乐播放器, 可以实现在线播放音乐, 也可以加载终端里存储的音乐文件.有效地减少了用户终端的安装软件...
基于html的音乐播放设计,基于HTML5技术的音乐播放器的设计与实现
weixin_42313980的博客
06-03 986
Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 33 卷第11 期(下) 2017 年 11 月 基于 HTML5 技术的音乐播放器的设计与实现 常志强袁 刘正余袁 杨劲楠 渊皖西学院电子与信息工程学院袁 安徽 六安 237012冤 摘 要院本文采用 HTML5技术袁设计了...
HTML5之audio实战，网页音乐播放器开发
热门推荐
code小王子
08-03 2万+
今天我们就基于 HTML5 audio  来，开发一个网页音乐播放器。 在HTML5 新特性中，audio 、video 是我们比较关心的 新 元素，我们终于可以脱离 Flash ，来开发音频、视频播放器了，对于 一个HTML 新元素，无非就是 属性、事件 、方法等等，关于audio 的具体的属性、事件 、方法，请谷歌。 看我们的HTML代码： audio.html
基于html5的音乐播放器的设计毕业设计程序
07-29
采用java技术构建的一个管理系统。整个开发过程首先对系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等；详细设计主要包括系统数据库访问的实现，主要功能模块的具体实现，模块实现关键代码等。最后对系统进行功能测试，并对测试结果进行分析总结。 包括程序毕设程序源代码一份，数据库一份，完美运行。配置环境里面有说明。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值