新浪云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代码相关推荐
- 记一次完整的新浪云部署nodejs项目上线完整流程及填坑处理!
工欲善其事,必先利其器.在开始本次部署新浪云nodejs项目之前,请先做好以下准备工作: 1.注册一个新浪微博账号! 2.使用注册好的新浪微博账号,登录新浪云网站:http://www.sinaclo ...
- 新浪云python示例_在新浪云上部署Django应用程序
前言 近日,笔者利用空闲时间写了一个简单的在线预约系统,使用的工具包括Python 3.5.1 和 Django 1.9.5 .早就有听说Django响亮的口号,"The web frame ...
- 博客从“新浪云“迁移到CSDN的说明
我原来的博客采用wordpress搭建在新浪云上,运行了有一年多了.16年3月结到新浪的通知,新浪云要涨价了.经过计算,继续维持一个独立的博客网站成本也是蛮高的.所以,我觉得讲博客搬运到CSDN的博客 ...
- sinaapp mysql连接_手把手教你在新浪云上免费部署自己的网站--连接数据库
看完之后,默认你知道怎么将代码上传到新浪云SAE,并且能够成功运行,连接数据库之前,你必须先创建有一个应用. 现在我创建一个名称为sampleone的应用,如下图 点击左侧的代码管理,选在右侧创建一个 ...
- 新浪sea增加php,php接口 连接新浪云sea的mysql数据库
自己写的时候采用了两种方式,都可以连接到新浪云sea mysql数据库数据取数 Hello, SAE! '; //echo "用户名:" .SAE_MYSQL_USER." ...
- 通过新浪云部署NideShop微信小程序商城(基于Node.js+MySQL+ThinkJS)
本文档为微信小程序商城NideShop项目的安装部署教程(GitHub),欢迎star 一.购买新浪云SAE 为什么选择SAE? 免费二级域名和支持https访问,不用备案,可用于做微信小程序服务器. ...
- 【公众号】微信第三方登录(静默授权和非静默授权)(具体代码:U盘 新浪云SAE)...
一.微信联合登录是怎么登录的,有几种登录方式:微信联合登录和微信授权登录[授权登录(非静默授权)与静默授权] [主动授权]:需要用户确认登录,这样可以通过用户的个人确认,获取用户全面的信息,无论是否关 ...
- 新浪云python示例_新浪SAE部署python项目
SAE实际上就是个多节点的虚拟主机,跟云主机差不多,只不过SAE的节点比一般的云主机要多,把网站程序布署在SAE上比自己用独立的服务器稳定性和性能要高很多.将自己用python开发的博客项目放在SAE ...
- SIM900A发送数据到新浪云服务器
简介 本文描述如何用SIM900A模块,发送数据到新浪云服务器. SIM900A 将SIM900A模块连接好,用串口助手依次发送以下指令. URL为在新浪云服务器上建的应用网址 ?a=today(a为 ...
- 新浪云服务器注册免费,新浪免费云空间SAE注册及云豆获取方法
新浪免费云空间SAE和谷歌的GAE是类似的,不过没谷歌免费云空间GAE强大.不过,新浪的云空间毕竟服务器在国内,使用的是国内的宽带,所以国内打开新浪云空间的速度是非常的快.另外,谷歌GAE遭到封杀,使 ...
最新文章
- 浅显易懂 Makefile 入门 (07)— 其它函数(foreach 、if、call、origin )
- Redhat、centos安装配置postgresql
- citespace与mysql_科学网—如何用CiteSpace整理数据 - 陈超美的博文
- Mybatis3源码分析(05)-加载Configuration-加载MappedStatement
- C++中 *(指针引用)与*(指针)的区别
- [转载] Python|range函数用法完全解读
- Jquery之AJAX用户注册表单验证(Vancl版)
- 基金行业数据安全保障体系建设探析
- dedecms采集织梦免写规则登陆模块软件
- 电大计算机阅读英语作文,2018年电大作业管理英语4形成性考核册英文写作参考答案英语作文...
- Python-计算三角形边长和面积
- oss图片无法在网站中显示
- 率土之滨服务器维修,率土之滨征服赛季合服与转服功能详解
- abbr和acronym标签的使用
- 分数化成有限小数的方法_分数化小数的方法|小数化分数题目
- 什么是SVN?SVN的简介安装和使用
- 世界著名的品牌啤酒——网络整理X
- Github使用教程(一)--搭建Github环境
- DB2 HADR TSA安装
- css3设置div边角是圆角
热门文章
- SS服务未启动,核心功能不可用的解决办法
- 朗文当代高级英语辞典android,朗文当代高级英语词典
- 【老生谈算法】matlab实现遗传算法改进的模糊C-均值聚类算法源码——C-均值聚类算法
- maven项目使用mybatis插件Free Mybatis plugin
- h265硬解码和软解码
- 我,30岁,部队服役5年,零基础转大数据
- AcWing 蓝桥杯C++ AB组辅导课学习记录(Python,备战蓝桥杯)Day31 - Day60
- python+jpype+linux出现内存溢出问题解决方案
- IntelliJ IDEA插件-翻译插件
- 使用cmd命令查看占用进程并结束进程