简单音乐播放器，可拖动进度条。完整代码demo

最新推荐文章于 2024-06-11 22:38:16 发布
最新推荐文章于 2024-06-11 22:38:16 发布
阅读量3.3k 收藏 13
点赞数 2
分类专栏： HTML5 文章标签： 播放器 音频 进度条
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42221334/article/details/106289383
版权
这是一个具备播放、暂停、继续播放功能的音乐播放器，特色是拥有可拖动的进度条和时间显示，同时支持音量调节。提供了完整的代码示例，可以直接应用。
摘要由CSDN通过智能技术生成

效果图：

可播放暂停继续播放，进度条可拖动，时间展示，声音调节

完整代码（直接拿来用）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio功能开发</title>
	<style>
	* {
	    margin:0;
	    padding:0
	}
	.music-range {
	    width:350px;
	    height:10px;
	    background:#2386e4;
	    border-radius:5px;
	    -webkit-appearance:none;
	    margin:0 auto;
	    cursor:pointer
	}
	.music-range::-webkit-slider-thumb {
	    width:15px;
	    height:15px;
	    background:#fff;
	    border:1px solid #f18900;
	    cursor:pointer;
	    border-radius:5px;
	    -webkit-appearance:none
	}
	a {
	    text-align:center
	}
	
	</style>
</head>
<body>
	<div class="music-all">
		<audio class='music-audio' co
最低0.47元/天 解锁文章
就像风1样
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简易音乐播放器（Mediaplayer+Broadcast+Service）可拖动进度条
qq_45744856的博客
12-12 1308
简易音乐播放器(Mediaplayer+Broadcast+Service)可拖动进度条 实现效果图以及功能说明 功能说明 ： 支持 ① 读取sdcard目录下的歌曲，列表展示 ② 点击列表切换歌曲，可以切换上一首，下一首，暂停，重置音乐 ③ 可以选择播放模式，按照按钮顺序分别是单曲循环，随机播放，列表循环，由于实现逻辑，需要等到当前歌曲结束才能生效 ④ 可以拖拽进度条更新进度 ⑤自动播放下一...
Android 音乐播放器的开发教程（八）歌曲的切换和进度条的拖动 ----- 小达
凹凸曼哒小乖兽
01-01 7068
歌曲的切换和进度条的拖动         大家新年快乐~~~~~~,2015年的第一天哦,前两天偷了点懒,木有继续完成我的博客,话说这博客写的时间也真够长的啊,写了一年了都还没有弄完,,今天我就是来兑现上一次的承诺,将进度条的拖动和切歌的功能加入到播放器中.       首先是进度条的拖动,其实现的原理就是拖动进度条松手之后,将当前进度条处于的位置用Broadcast的
Python实现音乐播放器 -----------内附源码
最新发布
小蜜蜂vs码农
06-11 1306
Python实现音乐播放器 -----------内附源码
安卓音乐播放器--（进度条）代码
06-05
简单的音乐播放器。外加一个播放进度条，可以拖动和显示进度
实现本地音乐选择,播放,带可拖动进度条
05-18
Android实现扫描本地sdcard上的所有音乐.并且可以进行播放，带可拖动进度条。 博客地址：http://blog.csdn.net/lowprofile_coding/article/details/45820163
ProgressBar进度条和SeekBar拖动条（滑动条）
weixin_44911775的博客
12-06 823
一、ProgressBar进度条 在某项延续性工作的进展过程中为了不让用户觉得程序死掉了，需要有个活动的进度条，表示此过程正在进行中。 用户浏览网页的时候，中间肯定有个传输过程，所以用进度条让用户耐心等待。再比如在下载应用中，它也会有进度条显示下载进度。 二、SeekBar拖动条（滑动条） SeekBar可以作为音乐播放器的进度指示和调整工具，音量调整工具等，SeekBar是ProgressBar的一个子类。 ...
微信小程序学习类Demo：音乐播放器（拖拽进度条）
03-17
项目地址：... 免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
利用html实现进度条拖动,如何使用javascript+css实现自定义拖动进度条（代码）
weixin_34205994的博客
06-05 1641
本篇文章给大家带来的内容是关于如何使用javascript+css实现自定义拖动进度条(代码)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。自定义可拖动的进度条，如下图效果：代码分三部分HTMLCSS#demo {width: 600px; height: 100px; margin: 100px auto;display: flex; align-items: center;}...
拖动进度条效果完整demo代码全（jq百分比）
boy火巨的博客
08-06 1370
完整代码： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="tex...
简单实现音乐播放器进度条功能
11-02
简单的实现了音乐播放器进度条功能，内置两首歌，可通过点击下一首进行播放。读者可以自行加入一些其他的代码进行调整。
MP3音乐播放器（含有进度条）
07-12
此资源不但包含了播放器基本的，而且还含有播放进度条!
带进度条的mp3播放器
09-23
带进度条的mp3播放器！！！
html音乐条
12-06
很简单的html音乐条，适合刚开始学习html的同学，非常实用。
html音乐条-1
12-06
很简单的html音乐条，适合刚开始学习html的同学，非常实用。
《桌面widget详解（四）——桌面音乐播放器（实战）》源码
12-07
博客《桌面widget详解（四）——桌面音乐播放器（实战）》对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/41754477
android音乐进度条设计代码,Android圆形图片 周围进度条 类似于音乐播放器的进度...
weixin_36165751的博客
05-26 264
圆形图片 周围进度条 类似于音乐播放器的进度圆角显示图片 来自CircleImageView 在基础上修改 让其可以周边动态显示进度app:textBgColor 外围进度的原始背景颜色app:textColor 外围进度条的颜色app:textSize="10dp" 宽度0时不显示使用方法android:id="@+id/acv_icon"android:layout_width="200dp"...
JavaScript实现音频进度条
热门推荐
不丢_hugh的博客
01-15 1万+
前言：刚学着使用HTML5和CSS和JavaScript做点东西比如作业emmmm但由于自己仅仅是速成的水平所以还是遇到了不少问题，所以决定把网络上比较难搜到或者难理解的用法记录下来，留做以后参考，也希望能给遇到相同问题的人一点点参考哈。 这一篇博客主要说的是用JS实现audio的自制简单进度条以及播放的跳转和播放时间的改变。起因是我感觉浏览器（我用的是火狐）自带的controls控件不太.........
input range音乐进度条
weixin_30911451的博客
02-24 466
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" /> <me...
android studio音乐播放器进度条代码
05-14
以下是一个简单的 Android Studio 音乐播放器的进度条代码示例： 在 layout 文件中，添加一个 SeekBar 元素用于显示进度条： ``` <SeekBar android:id="@+id/seek_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="100" android:progress="0" android:thumb="@drawable/ic_slider" /> ``` 在 Java 代码中，获取 SeekBar 对象并为其设置 OnSeekBarChangeListener 监听器，以便在播放时更新进度条： ``` SeekBar seekBar = findViewById(R.id.seek_bar); seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() { @Override public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) { // 进度条值改变时调用 } @Override public void onStartTrackingTouch(SeekBar seekBar) { // 用户开始拖动进度条时调用 } @Override public void onStopTrackingTouch(SeekBar seekBar) { // 用户停止拖动进度条时调用 } }); ``` 在播放器的播放方法中，使用一个 Timer 对象定时更新进度条的值，并设置 SeekBar 对象的进度： ``` Timer timer = new Timer(); timer.schedule(new TimerTask() { @Override public void run() { int currentPosition = mediaPlayer.getCurrentPosition(); int totalDuration = mediaPlayer.getDuration(); int progress = (int)(((double)currentPosition / totalDuration) * 100); seekBar.setProgress(progress); } }, 0, 1000); ``` 注意，这里的定时器每隔 1 秒钟更新一次进度条的值，可以根据实际需要调整时间间隔。此外，mediaPlayer 表示播放器对象，可以根据实际情况进行调整。 以上是一个简单的 Android Studio 音乐播放器的进度条代码示例，仅供参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值