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. [ Git ] [ GitHub ] 如何刪除自己github上面的Repository-轉載

    http://www.winwu.cc/2013/03/githubrepository.html

  2. 前端图像 裁剪利器 JQuerJjcrop+裁剪图像保存教程

    由于一个项目中需要用到用户头像上传裁剪组件,这两天便网上找了一些相关插件,主要由以下几种插件: 1.Image Cropper:http://elemefe.github.io/image-cropp ...

  3. 运营商 WLAN

    运营商 WLAN 运营商 WLAN 是 Android 9 中引入的一项功能,该功能可让设备自动连接到运营商实现的 WLAN 网络.在高度拥塞或信号覆盖范围较小的区域(如体育场或地铁站),运营商 WL ...

  4. 【Git 二】Windows|Mac 安装 Git

    Windows 或 Mac 上安装 Git 相对于 Linux 上安装来说步骤是简便一些的.Linux 安装步骤见:[Git 一]Linux安装Git 一.Windows 安装 Git 直接下载对应 ...

  5. iOS开发—— UIMenuController的使用

     UIMenuController的展现需要基于一个View视图,其交互则需要基于其所在View视图的Responder.举例来说,如果一个UIMenuController展现在当前ViewContr ...

  6. TCP服务器如何区分不同的用户

    CS架构:使用SOCKET(一般是一个整数),当服务器侦听到连接请求的时候,accept会返回一个SOCKET(用于识别不同的连接,可以理解成,SOCKET是区分不同连接的ID).当服务器listen ...

  7. ArchLinux 调节屏幕亮度和音量大小

    我使用的是dwm,所以这种琐碎小事还要我们亲自动手, 以后考虑做个脚本,把声音调节.屏幕亮度什么的统统塞进去 屏幕亮度 # 查看亮度最大值 cat /sys/class/backlight/intel ...

  8. cmd 操作命令

    1)cd 操作文件目录的 cd path #进入path cd / #返回到当前盘符的根目录 cd .. #返回到上级目录 2)dir 显示当前目录 dir #显示当前目录下的文件夹 dir path ...

  9. 介绍静态链接库和动态链接库的差别,及在VC++6.0中的建立和使用

    首先介绍一下链接库:链接库分为动态链接库和静态链接库两种 LIB是静态链接库,在程序编译连接的时候是静态链接,其相应的文件格式是.lib. 即当程序採用静态链接库的时候..lib文件里的函数被链接到终 ...

  10. Spring MVC学习------------WebApplicationContext

    父子上下文(WebApplicationContext) 假设你使用了listener监听器来载入配置.一般在Struts+Spring+Hibernate的项目中都是使用listener监听器的. ...