播放音乐的html代码,音乐播放器-html代码
#prograss{height:30px;width:640px;background:#111;position:relaive;}
#prograss .percent{width:20%;background:red;height:30px;position:absolute;}
#prograss span.f{width:20px;height:30px;background:green;display:inline-block;
position:absolute;
z-index:2;
}
#prograss span.s{width:100%;height:30px;background:transparent;display:inline-block;
position:absolute;
}
Aduio 元素的解析
当前时间:
播放时间:
剩余时间:
开始
暂停
静音
开启音量
window.onload = function(){
var audioDom = $("audioDom");
audioDom.oncanplaythrough = function(){
$("timer").innerHTML = getTime(this.duration);
};
audioDom.ontimeupdate = function(){
// $("timer").innerHTML = getTime(this.duration);
$("timeLong").innerHTML = getTime(this.currentTime);
$("timeLast").innerHTML = getTime(this.duration - this.currentTime);
$("prograss").children[0].style.width = ((this.currentTime / this.duration) * 100) +"%"
};
//开始
$("play").onclick = function(){
audioDom.play();
}
//暂停
$("stop").onclick = function(){
audioDom.pause();
}
var v =0;
//静音
$("staticVolume").onclick = function(){
v = audioDom.volume;
audioDom.volume = 0;
}
//开启音量
$("openVolume").onclick = function(){
audioDom.volume = v;
}
//拖拽
drag();
//时间转换
function getTime(timer){
var m =parseInt( timer / 60);
var s =parseInt( timer % 60);
m = m <10 ?"0" +m : m;
s = s <10 ?"0" +s : s;
return m +":"+s;
}
//拖拽
function drag(){
$("prograss").children[1].onmousedown = function(e){
var ev =e || window.event;
var targetDom =this;
var x = ev.clientX;
var y = ev.clientY;
var l =targentDom.offsetLeft;
var t = targetDom.offsetTop;
var mv =targetDom.parentElement.offsetWidth - targetDom.offsetWidth;
document.οnmοusemοve=function(e){
var evv = e || window.event;
var nl = evv.clientX -x -l;
if(nl<=0 ) nl=0;
if(nl>mv) nl = mv;
var p =(nl /mv)*100;
targetDom.style.left = nl+"px";
$("prograss").children[0].style.width = ((this.currentTime / this.duration) * 100)+"%";
audioDom.currentTime =totalTimer * p;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup =null;
}
}
}
$("prograss").children[2].onmousedown = function(e){
var ev =e || window.event;
var x =ev.clientX;
var nl = x - this.parentElement.offsetLeft;
$("prograss").children[0].style.width = nl+"px"
$("prograss").children[1].style.left = nl+"px"
}
//获取id
function $(id){
return document.getElementById(id);
}
}
播放音乐的html代码,音乐播放器-html代码相关推荐
- python装饰器调用顺序_聊一聊Python装饰器的代码执行顺序
为什么写这篇文章? 起因是QQ群里边有人提了一个问题:之前导入模块只需要1~2秒,为什么现在变成需要2~3分钟? 我的第一感觉是:是不是导入的模块顶层代码里边,做了什么耗时的事情.隔了一天,他的问题解 ...
- vue写js代码_vue.js弹出式音乐播放器特效代码
码农那点事儿 关注我们,一起学习进步 vue弹出式音乐播放器是一款基于vue.js实现的点击弹出式音乐播放器代码特效,点击图片即可弹出播放界面大图,可切换列表模式,上一首下一首音乐切换等功能. 下载源 ...
- html音乐播放器样式,html5扁平化mp3音乐播放器样式代码
特效描述:html5 扁平化mp3 音乐播放器样式.扁平风格的简易的mp3音乐播放器样式代码.html5 mp3音乐播放器 代码结构 1. 引入JS 2. HTML代码 0:00 0:00 'use ...
- 关于网易云音乐代码音乐播放器单曲和歌单的调用
网易云音乐代码音乐播放器调用 单曲调用代码: <iframe frameborder="no" border="0" marginwidth=" ...
- c语言编写音乐播放器完整代码(mciSendString函数的使用方法,第一次使用Visual Studio 2019的详细步骤)
本文会尽量让和笔者一样只有一点点可怜的c语言基础的小白看懂,并写出自己的音乐播放器. 笔者使用的编译器是Visual Studio 2019,直接在官网下载就行了.下面是Visual Studio 2 ...
- python开发音乐播放器教程_python开发简易版在线音乐播放器示例代码
在线音乐播放器,使用python的Tkinter库做了一个界面,感觉这个库使用起来还是挺方便的,音乐的数据来自网易云音乐的一个接口,通过urllib.urlopen模块打开网址,使用Json模块进行数 ...
- 基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 音乐播放器应用代码实现
一.技术点 1.从手机内存中读取出来并显示 1. 从数据库中查询所有音乐数据,保存到List集合当中,List当中存放的是Mp3Info对象2. 定义一个List集合,把对象添加到工具类返回的对象Li ...
- android高仿音乐播放器,Android开源音乐播放器之高仿云音乐黑胶唱片
系列文章 前言 上一节我们讨论了一个音乐播放器应该具有的功能,当我们实现了这些功能后,就该考虑如何扩展这些功能了.本节我们要讲的就是专辑封面的美化,看了市面上的播放器,最喜欢云音乐的黑胶唱片专辑封面, ...
- xmd后缀名改mp3_GitHub - dh9527/xMDPlayer: 一个可以在线听网易云音乐、QQ音乐、酷狗音乐的音乐播放器,还可以让你听自己的网易云歌单哦!...
xMDPlayer 一个可以在线听网易云音乐.QQ音乐.酷狗音乐的音乐播放器,还可以让你听自己的网易云歌单哦! A player that can make you listen to music o ...
最新文章
- Mybatis分库分表扩展插件
- Arthas 初探--安装初步适用
- SpringBoot高级-消息-RabbitTemplate发送接受消息序列化机制
- 在Linux开发.NET——拜拜了Win10
- spring依赖注入_Spring依赖注入技术的发展
- 旅行商回溯算法C语言,【算法作业】用回溯法求解旅行商问题
- NAT with same subnetwork
- 格雷码(Gray Code)编码、实现及规律(附编码)
- 人工智能相关数据集分享(三)
- 基于三点说构成的夹角提取特征点
- mysql经典sql语句大全_经典SQL语句大全(sql查询语句大全集锦)
- SparkStreaming动态读取配置文件
- 律师登台痛批,BSA置身事外
- Nuget的使用说明
- linux下网络播放器,月亮播放器:Linux无广告看片神器
- HEXO启动,初始化,本地页面成功启动,(Win 7 64 bit)可以在浏览器打开http://localhost:4000
- dasda(大s打陈建州)
- hive 正则表达式
- 【个人百度一面】----Java后端开发岗位----【校招提前批】
- C++练习11:计算a+aa+aaa+aa…a+…
热门文章
- 二层交换机与三层交换机区别详解~
- Invalid bound statement (not found) 五种解决方法
- tensorboard可视化问题projector无法展示
- 《Java解惑》系列——02字符谜题——谜题11:最后的笑声(字符、字符串连接操作)
- 随机森林在sklearn中的实现
- 1997年小学生计算机知识竞赛,2019年中小学优秀传统文化知识竞赛试题(小学组)97题附全答案...
- Stanford机器人D-H坐标系
- 区块链性能测试工具Hyperbench详解
- emc re 整改 超标_CE认证EMC测试不合格,如何整改 ;
- STM32 DMA2D技术