//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音乐播放器的更多相关文章

  1. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

  2. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  3. HTML5项目笔记4:使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  4. 使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  5. 简约的HTML5音乐播放器插件

    从我刚开始接触前端的时候就想写一个能播放音乐的小程序,刚开始写的时候虽然可以放,但是确实很慢,很卡,有很多可以优化的地方.最近在前一个版本的基础上重写了一个音乐播放器的插件,速度还可以吧 因为追求简约 ...

  6. 用<audio>标签打造一个属于自己的HTML5音乐播放器

    上一章节,我们刚刚讲了<video>标签,今晚,我们讲的是<audio>标签,这两个东东除了表示的内容不一样以外,其他的特性相似的地方真的太多了,属性和用法几乎一样,也就说,如 ...

  7. 一款好看+极简到不行的HTML5音乐播放器-skPlayer

    Demo: github skPlayer在线预览 预览: 单曲循环模式预览: 使用方法: 方式1:NPM npm install skplayer 方式2:引入文件 引入css文件: <lin ...

  8. HTML5音乐播放器(最新升级改造加强版)

    最近么,单位里面么老不顺心的,公司一直催要程序员要PHP,然后本宅好不容易推荐了一个,我日嘞,最后待遇变成1.3,吾师最后也同意1.3W,然后还说要考虑... 尼玛,4年多5年不到一点的工作经验,前端 ...

  9. 简单的HTML5音乐播放器(带歌词滚动)

      // // 0) { this.lrcArr.push(item); } } frag = document.createDocumentFragment(); for(i = 0,len = t ...

随机推荐

  1. elasticsearch 性能优化

    #系统默认的最大打开文件数的限制 vi /etc/security/limits.conf   *     -       nproc          50240    *     -       ...

  2. AltiumDesigner导入AutoCAD文件DXF,DWG格式

    最近有个朋友给了个AutoCAD的文件,需要我画个板子,结构什么的参见AutoCAD的文件,百度了下,得知protel是可以导入AutoCAD的DXF,DWG格式的文件的,那么AltiumDesign ...

  3. 执行计划中常见index访问方式(转)

    近期有朋友对于单个表上的index各种情况比较模糊,这里对于单个表上,单个index出现的大多数情况进行了总结性测试,给出了测试结果,至于为什么出现这样的试验结果未做过多解释,给读者留下思考的空间.本 ...

  4. macbookpro2011 光驱坏了如何安装windows7

    由于光驱坏了试了网络上的很多方法,2011年款是无法识别到光驱的,即使做了USB的windows驱动盘也无济于事,结果去了电脑城,一位技术员最终用一个U盘装着windowsPE,从PE中安装windo ...

  5. Linux kernel ‘net/key/af_key.c’信息泄露漏洞

    漏洞名称: Linux kernel ‘net/key/af_key.c’信息泄露漏洞 CNNVD编号: CNNVD-201307-071 发布时间: 2013-07-05 更新时间: 2013-07 ...

  6. POJ 3180 The Cow Prom(强联通)

    题目大意: 约翰的N(2≤N≤10000)只奶牛非常兴奋,因为这是舞会之夜!她们穿上礼服和新鞋子,别上鲜花,她们要表演圆舞.           只有奶牛才能表演这种圆舞.圆舞需要一些绳索和一个圆形的 ...

  7. 数学(FFT):BZOJ 3527 [Zjoi2014]力

    题目在这里:http://wenku.baidu.com/link?url=X4j8NM14MMYo8Q7uPE7-7GjO2_TXnMFA2azEbBh4pDf7HCENM3-hPEl4mzoe2w ...

  8. FFT(快速傅里叶变换):UVAoj 12298 - Super Poker II

    题目:就是现在有一堆扑克里面的牌有无数张, 每种合数的牌有4中不同花色各一张(0, 1都不是合数), 没有质数或者大小是0或者1的牌现在这堆牌中缺失了其中的 c 张牌, 告诉你a, b, c接下来c张 ...

  9. RAII(Resource Acquisition Is Initialization)资源获得式初始化

    当在编写代码中用到异常,非常重要的一点是:“如果异常发生,程序占用的资源都被正确地清理了吗?” 大多数情况下不用担心,但是在构造函数里有一个特殊的问题:如果一个对象的构造函数在执行过程中抛出异常,那么 ...

  10. 《A First Course in Probability》-chaper5-连续型随机变量-基本概念

    在利用基本的概率论模型解决实际问题的时候,我们很容易发现一些随机变量的连续分布的,例如火车进站的时间.台灯的寿命等一些和时间相关的随机变量,此时我们发现我们难以求出某个点的概率了,因为随机变量是连续的 ...