html5 audio 自定义播放器

最新推荐文章于 2024-07-29 08:18:41 发布
最新推荐文章于 2024-07-29 08:18:41 发布
阅读量4.6k 收藏 5
点赞数 1
分类专栏： html5 文章标签： html5 audio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongqiangwin1314/article/details/48262115
版权
这篇博客介绍了如何使用HTML5的audio元素创建一个自定义的播放器，包括播放、暂停、停止、切换歌曲以及进度条控制等功能。读者可以在WAMP服务器环境下运行示例代码，体验音频操作和进度实时显示效果。
摘要由CSDN通过智能技术生成

自定义内容包括，播放，暂停，停止，上一首，下一首，进度条显示，进度条拖动并实时显示拖动位置

注：此代码因为有ajax跟服务器的通讯，所以是放在wampsever环境中运行，读者可以自行先替换默认播放的音乐，查看播放，暂停，停止，进度条拖动及显示拖动进度的效果。php代码就不贴了。


<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="jquery-2.1.4.js"></script>
	</head>
	<body>
		<audio id="audio" src="audios/李荣浩 - 笑忘书(live).mp3" controls="controls"></audio>
		<p>剩余播放时间：<span id="showTime"></span><span id="showDragTime"></span></p>
		<div id="timeBar" style="height:5px; width:300px; border:1px solid
最低0.47元/天 解锁文章
微枫1993
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义一个音频播放器
weixin_45386180的博客
05-25 638
简单的做一个音频播放器，还是不错的，css样式没有写，自由发挥啦！ //这个是html加粗样式 </div> <div class="timeNode"> <div class="nowNode"> </div
自定义制作音频播放器_使用HTML5制作音频播放器，第3部分：微数据和皮肤
cungui5726的博客
08-22 215
自定义制作音频播放器In the first two articles of this series I introduced the concept and code of a customized audio player. The prototype constructed to this point is “raw”, without any styling: the HTML5 and ...
html5自定义音频播放界面
01-19
利用audioAPI即兴做的自定义音频播放器小界面，必然有很多不足，望指出（界面难看除外）
【HTML+CSS】HTML中视频与音频的嵌入：＜video＞与＜audio＞标签详解
最新发布
Xiaoxin的博客
07-29 531
在现代网页设计中，多媒体内容的嵌入已成为不可或缺的一部分，其中视频和音频的展示尤为关键。HTML5标准通过引入和两个标签，极大地简化了在网页中嵌入视频和音频文件的过程，不再需要依赖外部插件如Flash。本文将详细介绍这两个标签的用法、属性以及最佳实践。
自定义音频播放器
hxpp777的博客
11-27 497
// //  YYPlayingViewController.m //  20-音频处理（音乐播放器1） // //  Created by apple on 14-8-13. //  Copyright (c) 2014年 yangyong. All rights reserved. // #import "YYPlayingViewController.h" #impo
audio自定义简易音频播放器
weixin_33895516的博客
08-22 404
先看一下效果: 点击这里查看DEMO, 当然源代码也都在这个文件里啦; 功能: 播放/暂停 音频轨迹随意拖动 播放时间及总时间 静音 实现逻辑: 当然, 最终还是使用的HTML5的audio的相关API实现的; 首先, 写好播放器相关的样式并且隐藏默认的播放器;然后, 就是一步步实现逻辑啦: 播放/暂停 audio.play()播放...
html audio语音播放器,HTML5-定制音频播放器-audio
weixin_33613462的博客
06-03 649
先看看效果---》传送门《---，如果感觉没什么大不了的就可以绕道了(==)HTML结构其实很简单，不要在意那个音频的地址。 首先是audio标签，是我们这个小东西的核心。其主要的属性可以点这里。做点前期的小工作。把背景弄黑，让播放器居中。body {background: black;}#maindiv {width: 300px;margin: 0px auto;position: relat...
HTML5实现自定义音视频播放器
weixin_45632016的博客
07-19 1462
目的： 通过综合性实验的设计，使学生综合训练自己的需求分析、系统设计、编程、测试等各种能力，积累软件开发的经验，提高学生进行软件开发所需具备的专业素质以及团队协作能力。 要求： 1.编写一个音视频播放器，可以是网页版，也可以是电脑客户端版，实现流畅的播放音频、视频； 2.实现播放器控制基本功能，包括添加播放文件、播放、暂停、控制进度等功能； 3.实现友好的UI设计，增强用户体验； 该实验在HTML5中调用了Audio标签与Video标签对视频与音乐进行的设计 效果图为： 音乐播放器： 视频页面： 文件类
移动端自定义音频播放器
weixin_46189889的博客
09-03 281
文章目录1、自定义的音频播放器效果图2、代码3、使用说明4、用到的图片 1、自定义的音频播放器效果图 2、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
html5在线定制,HTML5 audio定制网页音频播放器
weixin_34549315的博客
05-30 244
效果图：音频播放器div#buttonDiv{width:600px;}progress#playPercent{width:600px;}div#divLeft{float:left;}div#divRight{float:right;font-weight:bold;} 您的浏览器不支持audio元素 播放后退前进重新开始静音增大音量降低音量JS代码：var audio,showTime;fu...
vueAudiocustomStylepalyer一个audio标签自定义样式的vue组件
08-10
vueAudio-customStyle-palyer, 一个audio标签自定义样式的vue组件
HTML5 音频 视频的使用以及自定义播放器
12-25 1216
一、音频 audio：音频 src:播放的音频文件的路径 controls:音频播放器的控制面板 autoplay:自动播放 loop:循环 <audio src="../mp3/xxx" controls autoplay loop></audio> 二、视频 video：视频 src:播放的视频文件的路径 controls:视频播放器的控制面板 auto...
用html5写一个音乐播放器
canduecho的专栏
08-27 5231
这只是一个简单的示例，你可以根据你的需求进一步自定义和扩展播放器的功能。如果你希望实现更复杂的音乐播放器，可能需要使用一些现成的音频播放器库或框架。如果你想要增加更多的功能，如自定义样式、播放列表、自动播放等，你可能需要使用JavaScript来操作音频元素。在上面的示例中，我们使用了自定义的样式来布局播放器，并添加了自定义的播放和暂停按钮，通过JavaScript代码实现了播放和暂停功能。在HTML5中创建一个简单的音乐播放器时，你可以使用``元素来实现。音乐播放器
html5 audio 自定义 controls,Html 5 audio tag custom controls?
weixin_33358246的博客
07-16 464
After a lot of research, I found an easy way of eliminating and manipulating specific parts of the predefined controls.Create your elements as you usually would, like so:Then in the CSS file, you writ...
自定义音乐播放器
xaioxaiobai的博客
10-26 422
音乐播放器
HTML5之audio自定义控件案例
weixin_46513664的博客
03-24 1816
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
HTML5 audio标签自定义控制器
qq_38563342的博客
08-21 1658
HTML5 audio标签自定义控制器 由于h5的audio标签自带的控制器在不同浏览器上显示有差异，所以就自制了一个 效果如下 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <
html+css实现音乐播放器，无需JavaScript
帝一松鼠的博客
06-16 4696
这是一个音乐播放器的HTML代码，包括一个div元素作为播放器的容器，其中包括三个子元素：封面图片、歌曲信息和音频标签。 <!-- 音乐播放器 --> <div class="player"> <!-- 歌曲封面 --> <div class="cover"> <img src="imag
vue3 + Element Plus自定义音频audio样式及控件
qdm13209211861的博客
06-13 6252
先封装一个组件。注意：需提前安装了。
自定义音频播放器_创建自定义HTML5音频播放器
06-11
好的，我可以给你一些关于创建自定义HTML5音频播放器的建议。首先，你需要了解HTML5 audio元素的基本用法和属性。然后，你可以使用CSS来美化你的播放器，添加播放/暂停按钮、进度条和音量控制等功能。最后，你需要使用JavaScript来控制播放器的行为，例如播放、暂停、获取音频长度和当前进度等。 以下是一些可能有用的代码片段： 1. HTML5 audio元素： ```html <audio id="myAudio" src="audio.mp3"></audio> ``` 2. 播放/暂停按钮： ```html <button id="playButton">Play</button> ``` ```javascript var audio = document.getElementById("myAudio"); var playButton = document.getElementById("playButton"); playButton.addEventListener("click", function() { if (audio.paused) { audio.play(); playButton.innerHTML = "Pause"; } else { audio.pause(); playButton.innerHTML = "Play"; } }); ``` 3. 进度条： ```html <div id="progressBar"> <div id="progress"></div> </div> ``` ```css #progressBar { width: 100%; height: 10px; background-color: #ccc; } #progress { width: 0%; height: 100%; background-color: #000; } ``` ```javascript var audio = document.getElementById("myAudio"); var progressBar = document.getElementById("progressBar"); var progress = document.getElementById("progress"); audio.addEventListener("timeupdate", function() { var percent = (audio.currentTime / audio.duration) * 100; progress.style.width = percent + "%"; }); ``` 4. 音量控制： ```html <input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1"> ``` ```javascript var audio = document.getElementById("myAudio"); var volumeControl = document.getElementById("volumeControl"); volumeControl.addEventListener("input", function() { audio.volume = volumeControl.value; }); ``` 希望这些代码片段能帮助你创建自定义HTML5音频播放器！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值