利用HTML、css、JavaScript以及jQuery库创建音乐播放器

最新推荐文章于 2022-11-14 20:37:24 发布
VIP文章 最新推荐文章于 2022-11-14 20:37:24 发布
阅读量302 收藏 1
点赞数 1
分类专栏： web前端 文章标签： css html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46024020/article/details/107831236
版权

HTML（page.html）代码

<head>
    <meta charset="UTF-8">
    <title>岛民MUSIC</title>
    <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css">
    <link rel="stylesheet" href="css/page.css">
    <script src="js/jquery-3.5.0.js"></script>
    <script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
    <script src="js/player.js"></script>
    <script src="js/progress.js"></script>
<!--    <script src="js/lyric.js"></script>-->
    <script src="js/index.js"></script>

</head>

<body>

<div class="header">
    <h1 class="logo"> <p>岛民音乐</p> </h1>

    <ul class="register">
        <li>登录</li>
        <li>设置</li>
    </ul>

</div>

<div class="content">
    <div class="content_in">

        <div class="content_left">

            <div class="content_toolbar">
                <span><i></i>收藏</span>
                <span><i></i>添加到</span>
                <span><i></i>下载</span>
                <span><i></i>删除</span>
                <span><i></i>清空列表</span>
            </div>

            <div class="content_list" data-mcs-theme="rounded-dots">
                <ul>

                    <li class="list_title">
                        <div class="list_check"><i></i></div>
                        <div class="list_number"></div>
                        <div class="list_name">歌曲</div>
                        <div class="list_singer">歌手</div>
                        <div class="list_time">时长</div>
                    </li>

                </ul>
            </div>

        </div>

        <div class="content_right">
            <div class="song_info">
                <a href="javascript:;" class="song_info_pic">
                    <img src="images/03.jpg" alt="">
                </a>
                <div class="song_info_name">歌曲名称：
                    <a href="javascript:;">sheep</a>
                </div>

                <div class="song_info_singer">歌手：
                    <a href="javascript:;">张艺兴</a>
                </div>

                <div class="song_info_album">专辑名：
                    <a href="javascript:;">sheep</a>
                </div>
            </div>
            <ul class="song_lyric">

            </ul>
        </div>

    </div>
</div>

<div class="footer">
    <div class="footer_in">
        <div class="footer_in">
            <a href="javascript:;" class="music_pre"></a>
            <a href="javascript:;" class="music_play"></a>
            <a href="javascript:;" class="music_next"></a>
            <div class="music_progress_info">
                <div class="music_progress_top">
                    <span class="music_progress_name">honey / 张艺兴</span>
                    <span class="music_progress_time">00:00 / 3.17</span>
                </div>
                <div class="music_progress_bar">
                    <div class="music_progress_line">
                        <div class="music_progress_dot"></div>
                    </div>
                </div>
            </div>
            <a href="javascript:;" class="music_mode"></a>
            <a href="javascript:;" class="music_fav"></a>
            <a href="javascript:;" class="music_down"></a>
            <a href="javascript:;" class="music_comment"></a>
            <a href="javascript:;" class="music_only"></a>
            <div class="music_voice_info">
                <a href="javascript:;" class="music_voice_icon"></a>
                <div class="music_voice_bar">
                    <div class="music_voice_line">
                        <div class="music_voice_dot"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 </div>

<div class="mask_bg"></div>
<div class="mask"></div>
<audio src=""></audio>
</body>

css（page.css）代码

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    font-size: 14px;
}
.header{
    width: 100%;
    height: 45px;
    /*background: darkred;*/
}
.header .logo{
    float: left;
    margin-left: 20px;
    opacity: 0.5;
}
.header
最低0.47元/天 解锁文章
Lay?
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)
m0_67393342的博客
03-06 1920
直接跳到末尾 获取完整源码 今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器，没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块，也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的，您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。 使用 HTML、CSS 和 JS 创建在线音乐播放器 ?? 在线演示地址 ?? 完整代码结构 ?? home-section 首页部分 ?? pla.
【web前端期末大作业】基于html+css+javascript+jquery技术设计的音乐网站(44页)
qq_38514921的博客
03-25 96
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
web前端期末大作业：基于HTML+CSS+JavaScript制作我的音乐网站（带设计报告）
网页设计与制作 | HTML+CSS+JS
11-05 6977
🎵 音乐网页设计 、🎸仿网易云音乐、各大音乐官网网页、🎶明星音乐演唱会主题、🥁爵士乐音乐、民族音乐、等网站的设计与制作。🏷️HTML音乐网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结
HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画
热门推荐
而风不止
11-14 1万+
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业，茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
html音乐播放器 利用css和js知识来创建一个音乐播放器（虽然简陋，但是逻辑很容易懂，适合初学者）
m0_72190449的博客
08-16 3230
作为初学者，制作一个网页音乐播放器来提高我们编写代码水平很有用，把你要的歌曲放到src里面就可以了。
JavaScript CSS jQuery 网页音乐播放器
05-27
JavaScript CSS jQuery 网页音乐播放器
HTML，CSS，JavaScript，jQuery仿苹果官网
最新发布
01-05
原生仿苹果官网项目 所用技术栈 HTML,CSS,javaScript,jQuery技术 + iconfont阿里巴巴的图标库。可用做作业。下载解压，内部有完整代码，点击index.html即可运行。无需服务器。
HTML5+CSS3+jQuery制作视频播放器完全指南
03-04
本教程将会手把手地教你制作一个基于HTML5&CSS3&JavaScript技术的视频播放器。首先下载MediaElement.js脚本文件，这是一个开源的HTML5音、视频插件，解压后你会得到3个文件——"flashmediaelement.swf"、...
生日祝福（HTML+CSS+JavaScript+jQuery）.zip
12-27
生日祝福（HTML+CSS+JavaScript+jQuery），强化4种语言练习，所有内容均属于dom操作。对于大学生学习前端技术帮助极大。
jquery+html5音乐播放器.zip
11-19
jquery+html5音乐播放器.zip
html-css-js-musicsite:它是一个音乐网站。使用html构建内容，css添加样式，javascript实现交互
06-28
html-css-javasript-musicsite 它是一个音乐网站。使用html构建内容，css添加样式，javascript实现交互。 DIV 建筑布局 实现flv播放器 document . cookie = "Cache=filehude5624;domain=vchinese.com;path=/" ; function playmedia ( strID , strType , strURL , intWidth , intHeight ) { var objDiv = document . getElementById ( strID ) ; if ( ! objDiv ) return false ; objDiv . innerHTML = makemedia ( strType , strURL , intWidth , intHeight )
jQuery使用jAudio.js插件实现流媒体音乐播放器
04-27
jQuery使用jAudio.js插件实现流媒体音乐播放器
使用html+jquery+本地的音乐文件实现了基本的网页音乐播放器
小仙女说：但行好事，不问前程
06-06 5042
在学习前端的路上，跟着教程做了一个不需要什么js的web端音乐播放器代码结构如下：点我下载jquery-3.3.1.js&lt;!-- demo.html --&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Music&lt;/title&gt; &lt;style type="text/css"&
【小河今学 | Html+CSS+JS+JQ】音乐播放器1-布局
LB_laber的博客
08-15 490
音乐播放器
HTML+JavaScript+CSS+JQuery实现音乐播放器
YANGGEOL
05-21 4623
音乐播放器效果如下 包含的功能 重新开始播放 上一曲 下一曲 暂停、继续播放 静音 调节音量 可调节播放进度条 自动播放下一曲 代码 HTML代码 HTML就是一个基本的网页结果，什么地方有什么样的标签，其中也引用了iconfont字体图标，还有引入JS和CSS文件以及设置网站图标 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MusciPlayer&
html在线播放mp3代码实现,实现音乐播放器的代码（html5+css3+jquery）
weixin_33865450的博客
05-30 1204
看下面的效果图很不错吧，是怎么实现的呢？下面小编给大家分享下我的一番宝物，Lisa唱的 在angel beats的插曲。用到html5、css、jquery实现此音乐播放器。一番宝物，Lisa唱的 在angel beats的插曲最后在简述这个东西怎么写之前，本人男，24岁，籍贯上海，诚招女友一枚，要求：性格温顺。。。(省略500字) 一番の宝物Lisa(Yui final ver) 分...
前端----利用html,css,js自制有趣的音乐播放器
Sunny_tx的博客
03-12 3720
最近在学前端，然后做了一个简易的音乐播放器，原本只是一个静态的网页，用a标签实现链接，embed标签引入mv，audio标签实现音乐播放，右边的marquee标签实现歌词滚动但是总觉得还不够，就加上了js用按钮可以同时控制音乐的播放以及旁边歌词的滚动，发现挺有趣的，话不多说，先上图： 以下是主要代码： <div class="contanier"> <...
【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1
VirusScanLog的博客
04-06 880
文章目录纯html+css构造网页音乐播放器html代码：CSS代码： 纯html+css构造网页音乐播放器 此处参照各大音乐播放器 这个页面使用了1天的时间进行构造，由于对各语法还不是很熟悉，所以用的时间比较久，且很多地方可能写得也不是很好，后面我会持续更新我的音乐播放器，如果有大神可以指教，同样感激不尽！ 此音乐播放器仅完成了三分之二左右，且对javascript语言并不是很熟悉，所以没有能让页面 “动起来” ，后期相关的页面操作会使用typescript编程语言进行完善，同时请各位大佬多多指教！
课程描述HTML、CSS、JavaScript、JQuery
05-20
HTML是一种标记语言，用于...JQuery是一个JavaScript库，使JavaScript编程更加容易。它提供了许多常用的功能和方法，使开发人员可以更快速地编写代码。JQuery还提供了许多插件，可以轻松地添加各种交互效果和动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值