HTML5音乐播放器
//HTML5部分
<a href="javascript:void(0);" onclick="getCurrentTime('firefox');">获取播放时间</a>
<a href="javascript:void(0);" onclick="playOrPaused('firefox',this);" class="dib off video_exist rotate" id="yinyue">播放</a>
<a href="javascript:void(0);" onclick="hideOrShowControls('firefox',this);">隐藏控制框</a>
<a href="javascript:void(0);" onclick="muted('firefox',this);">开启静音</a>
<input type="button" value="+" id="upVol" onclick="vol('firefox' , 'up' , this )"/>音量<input type="button" value="-" onclick="vol('firefox' , 'down' ,this )"/>
<audio src="http://7xkstx.com2.z0.glb.qiniucdn.com/BJYY.mp3" id="audio" autoplay="autoplay" loop="loop"></audio>
<span id = "nowVol"> - </span>
//JS部分
var audio ;
window.onload = function(){
initAudio();
};
var initAudio = function(){
//audio = document.createElement("audio")
//audio.src='Never Say Good Bye.ogg'
audio = document.getElementById('audio');
};
function getCurrentTime(id){
alert(parseInt(audio.currentTime) + ':秒');
}
function playOrPaused(id,obj){
if(audio.paused){
audio.play();
obj.innerHTML='暂停';
return;
}
audio.pause();
obj.innerHTML='播放';
}
function hideOrShowControls(id,obj){
if(audio.controls){
audio.removeAttribute('controls');
obj.innerHTML = '显示控制框';
return;
}
audio.controls = 'controls';
obj.innerHTML = '隐藏控制框';
return;
}
function vol(id,type , obj){
if(type == 'up'){
var volume = audio.volume + 0.1;
if(volume >=1 ){
volume = 1 ;
}
audio.volume = volume;
}else if(type == 'down'){
var volume = audio.volume - 0.1;
if(volume <=0 ){
volume = 0 ;
}
audio.volume = volume;
}
document.getElementById('nowVol').innerHTML = returnFloat1(audio.volume);
}
function muted(id,obj){
if(audio.muted){
audio.muted = false;
obj.innerHTML = '开启静音';
}else{
audio.muted = true;
obj.innerHTML = '关闭静音';
}
}
//保留一位小数点
function returnFloat1(value) {
value = Math.round(parseFloat(value) * 10) / 10;
if (value.toString().indexOf(".") < 0){
value = value.toString() + ".0";
}
return value;
}
复制代码可以直接使用
HTML5音乐播放器的更多相关文章
- 4个小时实现一个HTML5音乐播放器
技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...
- jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器
最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...
- HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
- 简约的HTML5音乐播放器插件
从我刚开始接触前端的时候就想写一个能播放音乐的小程序,刚开始写的时候虽然可以放,但是确实很慢,很卡,有很多可以优化的地方.最近在前一个版本的基础上重写了一个音乐播放器的插件,速度还可以吧 因为追求简约 ...
- 用<audio>标签打造一个属于自己的HTML5音乐播放器
上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...
- 一款好看+极简到不行的HTML5音乐播放器-skPlayer
Demo: github skPlayer在线预览 预览: 单曲循环模式预览: 使用方法: 方式1:NPM npm install skplayer 方式2:引入文件 引入css文件: <lin ...
- HTML5音乐播放器(最新升级改造加强版)
最近么,单位里面么老不顺心的,公司一直催要程序员要PHP,然后本宅好不容易推荐了一个,我日嘞,最后待遇变成1.3,吾师最后也同意1.3W,然后还说要考虑... 尼玛,4年多5年不到一点的工作经验,前端 ...
- 简单的HTML5音乐播放器(带歌词滚动)
// // 0) { this.lrcArr.push(item); } } frag = document.createDocumentFragment(); for(i = 0,len = t ...
随机推荐
- SharePoint 2013 弹窗效果之本地HTML打开方式(二)
上一篇我们主要讲述如何通过showModalDialog方法进行弹出窗体,同时弹出信息定义在新的页面(Application Page),使用 SP.UI.$create_DialogOptions( ...
- ComponentOne的C1Chart做饼状图怎么显示其百分比
问题:ComponentOne的C1Chart做饼状图怎么显示每部分的百分比 描述: 我用C1Chart做饼状图的时候,不知道怎么显示其百分比在对应的区域上,求解. 目前做的效果(附加代码所生成的饼状 ...
- ORACLE 日志 logminer 使用
1. logminer安装 SQL> @$ORACLE_HOME/rdbms/admin/dbmslm.sql Package created. Grant succeeded. Synonym ...
- Color the Fence
Codeforces Round #202 (Div. 2) B:http://codeforces.com/problemset/problem/349/B 题意:给你一些颜料,然后你可以用这些颜料 ...
- NXP LPC11xx I2C Slave 从机程序
/**************************************************************************** * $Id:: i2cslave.c 363 ...
- Linux2.6内核--内存管理(2)--区
由于硬件的限制,内核不能对所有的页一视同仁.有些页位于内存中的特定物理地址上,所以,不能将其用于一些特别的任务.(关于内存分页机制可以查看:http://blog.csdn.net/dlutbruce ...
- chage命令管理用户口令时效
http://zhumeng8337797.blog.163.com/blog/static/1007689142011824102827487/ http://www.th7.cn/system/l ...
- Eight(bfs+全排列的哈希函数)
Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 22207 Accepted: 9846 Special Judge ...
- 数学(动态规划,GCD):COGS 469. [NOI2010]能量采集
能量采集 ★★☆ 输入文件:energy2010.in 输出文件:energy2010.out 简单对比 时间限制:1 s 内存限制:512 MB [问题描述] 栋栋有一块长方形的地, ...
- 字符串(马拉车算法,后缀数组,稀疏表):BZOJ 3676 [Apio2014]回文串
Description 考虑一个只包含小写拉丁字母的字符串s.我们定义s的一个子串t的“出 现值”为t在s中的出现次数乘以t的长度.请你求出s的所有回文子串中的最 大出现值. Input 输入只有一行 ...