css

			.bgAudio{width:27px;height:27px;position:fixed;right:10px;top:10px;z-index:999;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:none;-webkit-transition:all 1s linear;transition:all 1s linear;-webkit-transform:translateZ(0);transform:translateZ(0);display:none}
.bgAudio i{width:27px;height:27px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2CAYAAACMRWrdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAATqSURBVHja3JpdiFVVFMd/+wwUA6PUmBCY0sc1U8kspdDCsYEiycAezClHLYMgur30UtBDDwWSRvQQvYVpk5BNQVLUS2oYhVRqBoEfYzM5gzJm3clRGEtXD/0P7E537sfZ59x7acNlc+4+57/2f6/9sfZay5kZWRXnXBuwELgbWADMAWYC04AOvTYOnAVOAkeAH4GvgENmdimzzphZ0A9wwDLgbXXYUv7OCmMZ4EL75dJqzDl3BfA48Dxwo9c0DOwGvpNGBoFfgfMi0AFcA1wvjS4GuoHrPIwBYDPwjpldbIjGpKGNmkrxaA8BrwDzAzQ/XxhDHu5Jyapbg/UKLwD7PMGHgR6gLXTqeDIiYR725OwDCrkQA1YDYxJ0Ju1IppgZZyRzDFidGTGN4BZv9PqBaXkRKiO/E/jAk78FiIKIAW1AnwAvAsVGESrTl6L6YMB71aZ/tamwTUDjwIpmkfL6tEJ9MWB7paVQCWSTAM4DSzPqWAnoCMRY6h0dm+oiBjyiDyeAhzIc8RJwZwY4K9U3A9bURExberz7PZvxVCoB6zJcc/FuWahITOtqjz74MIc1UgLeyhCvX33dk1xvyRfX6sXTQGdOxEZD11niKDitPveWJQa0y84zYENOu1qp2qJPgblemCNAezliRc9McjkT+wtYkqGFEptfxX8RU+NxNT6a4zlU8iyI0Xrtvwq4PcIciJUSN3R5VnrUIGIGHAOmZ2Q4Dwqzy8yIdHtZr7rPzC7TuFIAPnHOtQdeli/L9PO54DQtDJiXs0k0BMwCXgD2e5r7OPTqA8z1bh4O4Nb4UtcAW28o8fyAN6ibM8AfENaCCFguze2mwcXMPgfu0lb9nHPunkDIvaqXR8AdeviWJhQz+xm4H7gEvBEId0j17ZEWMMBRmlTM7CfgJWCRc+6+AKgj8aYUed6hAZpb3pRB+3AARsxhRiRXGNpNaKLWxoH3gRCNlVRPjWIPrZn9QfPLNzoO0pZzqqdEtFY5nhVQJB8CzrmpLUBsDPgt4PspseYiuZ8BprcAsU5vZ0tTrvKJDevhphYgVtA6S1tiDsORN69vbgFi3cCnAd/PiddqBBzUw+JmMlJsbVGgxhaqPhh59lV3k7XVBfQHBv9iu/fL+NoSO/7nNtK6T7R9BMwIwL7Fv7ZE9s+/u8R0bZOm4SxgxMxGAmB6Ve8yj23sGhjM0jUA3KB1c20ljQFPBmrrP66Bcs6cVYFkCgoYjCb8G58Bp3Ka4qvKOnMS7rcDad1vwNPAhQoB9FJOAcIDSZd80mE6ohfWpRDwYg2ZAXkQ663oME28dKoeF7e3Rqv9hjMmdbX6OrmLu0xQor8OAV/USGx7xsTiEO7eikEJvTzbCyMVaxRwrgZSF7J07wHPeGGk2bUG/tZ4gb+VNfoLK5GamCxAl5LUg17grye3UK3OoclInQC6MySVPlTrrbd3aw2uA48BX2skj2n+P+XvVBkH1/tSBde9dIgdLZgOsSN1OkTCXHnNm1o784h2Vola7vTkvx6cwNICKUdP5JZy9L9PEksI3ujFq+OA4csh5xQwTxj+0TEsWXXfOEISMa8ENpRJxPxF1ksyEXNc7eUSMe9NOEpPAK8C28xsolmps5Fsxa0ZpM5uFVbwnTC1xqo4ZJYAt8nzNVM7WwfwpzT3u4zXo8APcuB8n2Wy898DAGS5KfDJ47MqAAAAAElFTkSuQmCC) no-repeat; background-size:27px 27px;display:block; position:relative; z-index:2}
.bgAudio .icon_music{}
@-webkit-keyframes audio-animation{
from{-webkit-transform:rotate(0);}
to{-webkit-transform:rotate(-360deg)}
}
.audioPlay i{-webkit-animation:audio-animation 1.2s linear infinite;animation:audio-animation 1.2s linear infinite;}

  

html

<a href="javascript:;" class="bgAudio" id="audio_ct">
<i class="icon_music"></i>
<em></em>
</a>

  

js

 /* Audio类 momo 2015-01-30 */
var mmAudio=function(aurl){
if(!aurl){return;}
var audio_ct=document.getElementById('audio_ct');
this.audio=document.getElementById('audio');
if(!this.audio){return;}
this.audioCt=audio_ct||null;
this.aurl=aurl;
this.loadMusic();
};
//装载音频
mmAudio.prototype.loadMusic=function(){
var _this=this;
_this.audio.src=this.aurl;
_this.audio.volume=0.5;
if(!_this.audioCt){return;}
_this.audioCt.style.display='block';
_this.audioCt.className='bgAudio audioPlay';
/*ios默认暂停*/
_this.isIphone(); //绑定音频控制
_this.audioCt.addEventListener('click',function(){
this.className=='bgAudio'?_this.playMusic():_this.pauseMusic();
},false);
}; //播放音频
mmAudio.prototype.playMusic=function(){
this.audio.play();
this.audioCt.className='bgAudio audioPlay';
}; //暂停音频
mmAudio.prototype.pauseMusic=function(){
this.audio.pause();
this.audioCt.className='bgAudio';
}; /*判断系统
ios自动暂停
ios 4隐藏
*/
mmAudio.prototype.isIphone = function(){
var sys = navigator.userAgent;
if(sys.indexOf('iPhone')>-1){
this.pauseMusic();
if(window.screen.height<=480){this.audioCt.style.display='none';}
}
}

  

调用方法

var music = new mmAudio('http://icon.xgo-img.com.cn/topic/music.mp3');

  

最新文章

  1. linux有关信号的FAQ
  2. diff/merge configuration in Team Foundation - common Command and Argument values - MSDN Blogs
  3. 【Android】AppCompat V21:将 Materia Design 兼容到5.0之前的设备
  4. 关于手机微网站ICP备案
  5. Web自动化框架LazyUI使用手册(1)--框架简介
  6. 2014年QS世界大学排名
  7. UVA - 12001 UVa Panel Discussion
  8. JavaBean转JSON方式
  9. MySQLdb使用
  10. iOS WKWebview 网页开发适配指南【转】
  11. golang 中的指针
  12. AVERAGE和averageif函数
  13. TCP系列55—拥塞控制—18、其他拥塞控制算法及相关内容概述
  14. Redis (二)_ jedis的使用
  15. generateScriptFile.py脚本使用过程中遇到的问题及解决
  16. java native方法及JNI实例
  17. 今天升级win10.vs调试程序各种崩溃
  18. pylab.show()没有显示图形图像(python的matplotlib画图包)
  19. 在mac上运行android的intel模拟器导致的死机问题解决
  20. CodeForces 659E New Reform

热门文章

  1. Linux 下查看内存使用情况方法总结
  2. mage Ansible学习3 ansible role实例
  3. .net大文件分块上传断点续传demo
  4. am335x system upgrade kernel f-ram fm25l16b(十六)
  5. Problem 3 二维差分
  6. C Primer Plus--结构和其他数据类型(1)
  7. 模板 - 数据结构 - 栈/Stack
  8. mysql5.6源码部署
  9. listbox demo
  10. React Hooks介绍和环境搭建(一)