JavaScript制作音乐播放器。实现了进度条拖动。音量大小控制，上一首下一首的切换

最新推荐文章于 2023-04-05 22:44:46 发布
最新推荐文章于 2023-04-05 22:44:46 发布
阅读量4.4k 收藏 45
点赞数 10
文章标签： javascript css html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46430385/article/details/105584449
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/music.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/icon.css">
</head>
<body>
<!--音乐播放器-->
<div class="musicPlayer">
    <!--歌曲信息-->
    <div class="musicInfo">
        <!--歌曲图片-->
        <div class="musicImg" id="musicImg">
            <img src="img/1.jpg" id="musicpic">
        </div>
        <!--歌曲图片 end-->
        <!--歌曲名称-->
        <div class="musicName">
            <h1 id="sname">歌曲名称</h1>
            <h2 id="singer">歌手</h2>
        </div>
        <!--歌曲名称 end-->
    </div>
    <!--歌曲信息 end-->

    <!--快捷文字-->
    <div class="kj">
        <ul>
        <li><img id="aiXin" src="img/aixin1.png"><p>喜欢</p></li>
        <li><img id="shouCang" src="img/shoucang.png"><p>收藏</p></li>
        <li><img id="xiaZai" src="img/xiazai.png"><p>下载</p></li>
        <li><img id="fenXiang" src="img/fenxiang.png"><p>分享</p></li>
        </ul>
    </div>

    <!--快捷文字 end-->

    <!--进度条-->
    <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="ctrls" id="ctrls">
            <button class="preBtn" id="preBtn" type="button"><img src="img/pre.png"></button>
            <button class="playBtn" id="playBtn" t
最低0.47元/天 解锁文章
坚持坚持-未来可期$$
关注
  • 10
    点赞
  • 踩
  • 45
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现播放器，有进度条，能控制音量
01-24
很好的一个js播放器哦，有进度条，有歌词等等，给media player 没区别。
audiojs播放器
11-07
audiojs播放器,在IE，chrome,firefox等都试过了，播放MP3文件效果很好
js之视频播放控件、进度条拖拽、点击
可爱又迷人的反派少女
10-09 5679
html部分 <div class="video-play"> <div class="video-left"> <div class="videobox"> <video width="100%" height="100%" src="./image/mp4.mp4"></video>
原生js实现播放器操作（随机播放、上/下一首、播放/暂停）
mic_jay的博客
10-22 3365
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>播放器</title> </head> <body> <audio hidden controls="controls" ...
HTML+JavaScript+CSS+JQuery实现音乐播放器
YANGGEOL
05-21 4709
音乐播放器效果如下 包含的功能 重新开始播放 上一曲 下一曲 暂停、继续播放 静音 调节音量 可调节播放进度条 自动播放下一曲 代码 HTML代码 HTML就是一个基本的网页结果，什么地方有什么样的标签，其中也引用了iconfont字体图标，还有引入JS和CSS文件以及设置网站图标 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>MusciPlayer&
音乐播放器之进度条控制音量大小
06-29
在开发音乐播放器时，进度条常常被用来作为音量...综上所述，音乐播放器中的进度条控制音量大小是通过结合用户界面交互、音频处理和编程技术来实现的。理解和掌握这些知识点对于开发功能丰富的音乐播放应用至关重要。
简单实现音乐播放器进度条功能
11-02
这个"简单实现音乐播放器进度条功能"的项目，旨在教你如何在编程环境中创建一个基本的音乐播放器，包括播放、暂停和切换歌曲的能力，并通过进度条展示当前播放进度。我们将探讨以下关键知识点： 1. **媒体播放API**...
JS实现音量控制拖动
10-15
在本文中，我们将探讨如何使用JavaScript（JS）实现一个音量控制拖动功能，这个功能常见于音频播放器等多媒体应用中。我们将通过HTML、CSS和JavaScript代码来创建一个简单的音量控制条，并实现拖动按钮来调整音量。 ...
一款web音乐播放器(包含上下曲、循环功能)
02-28
在IT行业中，Web音乐播放器是一种常见的应用，它允许用户在网页上播放、控制和管理音乐。本项目涉及的是一款具备上下曲切换和循环播放功能的Web音乐播放器，主要利用HTML、jQuery技术进行实现。这里我们将深入探讨这...
javascript音乐播放器（可二次开发）
06-07
JavaScript音乐播放器是一种基于Web的音频播放解决方案，它允许用户在网页上播放、控制和管理音乐。本项目提供了一个基础的框架，具有可扩展性和二次开发能力，这意味着开发者可以根据自己的需求进行定制，添加新的...
videojs视频可拖动播放与不可拖动播放
12-22
videojs视频可拖动播放与不可拖动播放
HTML5(Canvas Vedio Audio 拖动)
afvdxhq267883的博客
07-12 157
1、Canvas (在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字) HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。 你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。 <canvas id="myCanvas" width="200" ...
音量控制竖直滑块html,用js实现调节音量滑块的方法
weixin_39660922的博客
06-19 754
用js实现调节音量滑块的方法发布时间：2020-03-26 14:07:36来源：亿速云阅读：879作者：小新今天小编分享的是用js实现调节音量滑块的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。首先，我们来看一下效果：html代码：当前位置0%css代码：.all {width: 500px;height: 80px;margin: 100px auto;p...
vue.js实现点击、拖动进度条播放歌曲事件
tianbushengyinuo的博客
08-27 1467
进度条可参考本人已写的进度条链接： 效果图： vue.js实现点击、拖动进度条播放歌曲事件 进度条： <audio ref="player" autoplay ></audio> <div class="bar"> <div class="progressbar" @click="playMusic" ref="runfatbar"&g
js获取歌曲时长_HTML5教程：使用JS开发简单的音乐播放器
weixin_39552472的博客
11-22 599
使用JS开发简单的音乐播放器最近，我们在教学生使用JavaScript，今天就带大家开发一款简单的音乐播放器。首先，最终效果如图所示：首先，我们来编写html界面index.html，代码如下:<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title>&...
十款超实用的Javascript音频库
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
10-13 2533
Web和Web浏览器在过去几年取得了快速的进步，这些进步与新技术通常被认识是HTML5达到的惊人的成果。然而，在这些新技术中，音频任然是不足的。尽管谷歌开了WEB音频API，使我们上网得到方便，但是只有一些最新的浏览器才支持这种新开发的WEB的音频。 HTML5提供了一种新的音频标签实现和规范用一个简单的HTML对象而无需音频插件来控制音频。这只是一个简单的整合这些新的HTML5音频特征及使
JS音频播放器和进度条实现自定义
qq_54684701的博客
08-29 2226
修改audio跟我们之前修改文本框之类的不太一样，不能直接用CSS属性修改，我们需要先写一个默认的audio标签，然后把它隐藏，用新的标签将它覆盖掉，用写好样式后用调用API 的方式控制音乐播放。各种API网上都有，这里列几个常见的： play()播放；pause（）暂停；currentTime：当前时间；duration总时间； 针对不同的地方添加不同的事件就可以了。本质就是把默认的audio覆盖掉然后利用它的事件实现自定义。进度条可以直接用element-ui，这里建议把将事件换算成分秒的函数封装，不然
JS案例：拖拽音量调节效果
02-22 1286
用原生js做了一个拖拽调节音量 效果是这样的：（拖动时音量随两个圆形交集面积增大而增大） html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...
记录一次Vue3中自定义audio标签实现拖拽滑动进度和音量的控制
Codernmx
04-05 3742
isListen : false , positionY : 0 , voice : 100 , total : 0.00 , }) const audio = ref() const percentage = ref(0) //播放还是暂停 let timer = null const changePause =() => {//暂停 } else {//播放 if(timer) {
写一个音乐播放器的设计与实现
最新发布
06-02
设计: 1.用户界面设计：需要设计一个用户界面，包括音乐列表、播放控制按钮、进度条等。 2.音乐列表：将音乐文件保存在本地或者是服务器上，需要将音乐文件加载到音乐列表中。 3.播放控制：需要实现播放、暂停、上一曲、下一曲、循环播放等功能。 4.进度条：需要实现音乐播放进度的显示，并且可以通过拖动进度条来改变播放进度。 5.音量控制：需要实现音量大小的控制功能。 6.歌词显示：需要实现歌词显示功能，可以自动匹配歌曲的歌词并显示在界面上。 实现： 1.使用HTML、CSS和JavaScript实现用户界面的设计。 2.使用Ajax技术从服务器加载音乐文件，并将音乐文件加载到音乐列表中。 3.使用HTML5的Audio标签实现音乐播放功能，并实现播放控制功能。 4.使用JavaScript实现进度条的显示和拖动功能。 5.使用JavaScript实现音量控制功能。 6.使用JavaScript实现歌词显示功能，并使用正则表达式匹配歌曲的歌词。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值