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. 为什么在input中加了display:inline;再加宽,还有作用?

    以前一直一位input是个行内元素,但是,行内元素的特性就是没有宽高的概念,元素多高,多宽,全凭内容撑起来的. 但是今天写了个demo,用chrome控制台显示:display:inline-bloc ...

  2. [ xml ] [ log4j2 ] No grammar constraints (DTD or XML Schema) referenced in the document.

    <!DOCTYPE xml> http://rx1226.pixnet.net/blog/post/321584550

  3. dedecms实现表单提交数据到指定的邮箱

    1.http://blog.csdn.net/webnoties/article/details/17219219 2.http://www.jz96.com/451.html 3.https://m ...

  4. Linux 文件系统详解

    作者: Paul Brown 译者: LCTT amwps290 这篇教程将帮你快速了解 Linux 文件系统. 早在 1996 年,在真正理解文件系统的结构之前,我就学会了如何在我崭新的 Linux ...

  5. sys.path

    sys.path.append() 和 sys.path.insert() python程序中使用 import XXX 时,python解析器会在当前目录.已安装和第三方模块中搜索 xxx,如果都搜 ...

  6. NodeJS学习笔记 (10)网络TCP-net(ok)

    模块概览 net模块是同样是nodejs的核心模块.在http模块概览里提到,http.Server继承了net.Server,此外,http客户端与http服务端的通信均依赖于socket(net. ...

  7. 用Python定时爬取网站最新资源

    记录一下. 写做个网站,爬了另一个网站的内容来做自己网站的内容. 把脚本挂到服务器,每隔一个小时去爬一次资源,然后保存到一个HTML文件里. 用flask做web对接,当有请求的时候就返回那个HTML ...

  8. 通过JMeter来测试Quick Easy FTP Server的上传与下载性能

    FTP性能测试 1.1背景说明 本测试选用的是一个小型的FTP服务器软件:Quick Easy FTP Server.Quick Easy FTP Server是一个全中文的FTP服务器软件,反应迅速 ...

  9. 03016_DBCP连接池

    1.连接池概述 (1)用池来管理Connection,这样可以重复使用Connection: (2)有了池,所以我们就不用自己来创建Connection,而是通过池来获取Connection对象: ( ...

  10. 【习题 8-18 UVA - 1619】Feel Good

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用单调队列求出l[i]和r[i] 分别表示i的左边最近的大于a[i]的数的位置以及i右边最近的大于a[i]的数的位置. 则l[i]+ ...