h5音频播放,里面參数能够查看http://www.w3school.com.cn/html5/html_5_audio.asp
<audio controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
html部分:
<div style="z-index: 999; width: 30px; height: 30px; position: absolute; top: 2%; left: 89%; cursor: pointer;" id="mplay"> 
   <audio autoplay="autoplay" loop="loop" id="audio" src="http://www.eyee.cn/Public/Uploads/images/2015/04/27/699/553df80928571.mp3"> 
<!--    <source src="song.mp3" type="audio/mpeg"></source> -->使用本地音乐
   </audio> 
</div> 
js效果:能够通过点击一张图片来控制音乐的播放和暂停
      var sj_music = true;
      var music = document.getElementById("audio");
      $("#mplay").click(function(){
          if(sj_music){
            $(this).css("background-image","url(images/musicoff.png)");
            music.pause();
            sj_music = false;
          }else{
            $(this).css("background","url(images/musicon.png)");
            music.play();
            sj_music = true;
          }          
      });
效果例如以下:
播放时效果
暂停时效果

h5播放音乐的更多相关文章

  1. iphone微信 h5页音乐自动播放

    iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...

  2. 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码

    已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...

  3. pcDuino-V2利用madplay播放音乐

    在pcDuino的UBUNTU系统下,打开控制台,利用apt-get来下载madplay软件. sudo apt-get install madplay 播放音乐: madplay xxx.mp3 x ...

  4. matlab播放音乐

    最近在做计算,写了一些matlab代码,脑壳还疼,所以决定发挥一下逗B精神,写一个程序玩一下. 想了想,既然写代码的时候喜欢听歌,而且我的电脑打开网易音乐的速度巨慢(不知道为什么..),那些一个程序直 ...

  5. go语言让windows发出声音,或者播放音乐

    go语言让windows发出声音,或者播放音乐的例子:会发出alert警告的声音 ( 这是我应群员的求助写的, 如果你需要了解其中的调用原理或过程 或更多go语言调用win32api的资料,加群: 2 ...

  6. Inno调用dll --- 实现背景播放音乐

    Inno 播放音乐可以调用系统api函数mciSendString来实现,而mciSendString函数存在C:\Windows\System32\winmm.dll中,因此最终只要成功从该dll文 ...

  7. 【分享】4412开发板ubuntu 12.0.4播放音乐没有声音解决方法

    转自迅为论坛:http://bbs.topeetboard.com 准备工作 1.下载 vim 在命令行上输入 apt-get install vim 下载 vim 2.输入 vim /etc/hos ...

  8. 在Linux终端命令行下播放音乐的命令(Ubuntu)

    现在的 Linux 桌面已经发展的很好了,在桌面下播放音乐操作起来也很简单.那么我们还记得在桌面不是那么好的时候我们是怎么播放音乐的么?哎,我是想不起来了,实在是太难了. 不过现在我们可以先安装一个小 ...

  9. C# 调用系统winmm.dll 播放音乐wav mp3

    using System.Runtime.InteropServices;//放wav public partial class frmMain : Form { 系统放 播放音乐 wav mp3 [ ...

随机推荐

  1. VS Code(Visual Studio Code)

    这次推荐 VS Code,这是个跨平台.免费的代码编辑器,集成开发.调试.编译为一身.单成启动速度,资源占用,就已经赢了各大编辑器(什么 SB.N++之类).以前觉得 VS 2015 是宇宙最强编辑器 ...

  2. AngularJs轻松入门(三)MVC架构

    MVC应用程序架构最早于1970年起源于Smalltalk语言,后来在桌面应用程序开发中使用较为广泛,如今在WEB开发中也非常流行.MVC的核心思想是將数据的管理(Model).业务逻辑控制(Cont ...

  3. 把枚举类型绑定到datasource

    /// <summary> ///ProjectPriority 的摘要说明 /// </summary> public enum ProjectPriority { 极低 = ...

  4. Mac上vmware虚拟机Windows10安装Tomcat8.0及配置环境

    1.下载tomcat8.0或其他版本.下载地址:http://tomcat.apache.org/download-80.cgi 2.双击进行解压. 3.安装成功之后,右键我的电脑 --> 选择 ...

  5. 【Fiddler】使用fiddler抓取指定浏览器的包

    参考资料:http://blog.csdn.net/sufubo/article/details/49331705 使用fiddler抓取不到浏览器的包时常用的解决办法: 1.必须先打开Fiddler ...

  6. Oracle11g密码忘记处理方法

    c:\>sqlplus /nolog sql>connect / as sysdba sql>alter user 用户名 identified by 密码;(注意在这里输入的密码是 ...

  7. 从头认识java-18.2 主要的线程机制(5)-守护线程与非守护线程

    这一章节我们来讨论一下守护线程与非守护线程. 1.什么是守护线程?什么是非守护线程? 非守护线程:Java虚拟机在它全部非守护线程已经离开后自己主动离开. 守护线程:守护线程则是用来服务用户线程的,假 ...

  8. android 在短信发送界面, 短信发送失败时,提示音不完整,会被中断

    1. 当一条SMS到来, 此时SMS是unseen状态, 就会弹出Notification提示用户 2. 但假设处于同一个联系人的界面下, 用户会立马看到这条SMS, 此时这条SMS会被高速的标记为s ...

  9. 前端编程提高之旅(十二)----position置入值应用

    这次内推项目用到的遮罩及其页面下方button都涉及一个概念position置入值得概念.效果图例如以下: 一个元素position属性不是默认值static.那么该元素被称为定位元素. 定位的元素生 ...

  10. CentOS6 安装 aria2

    CentOS6 安装 aria2 https://www.jianshu.com/p/31ea7aba5524 http://blog.51cto.com/skypegnu1/1637168 1.先安 ...