h5播放音乐
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播放音乐的更多相关文章
- iphone微信 h5页音乐自动播放
iphone微信 h5页音乐自动播放: // iphone自动播放 document.addEventListener("WeixinJSBridgeReady", functio ...
- 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码
已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...
- pcDuino-V2利用madplay播放音乐
在pcDuino的UBUNTU系统下,打开控制台,利用apt-get来下载madplay软件. sudo apt-get install madplay 播放音乐: madplay xxx.mp3 x ...
- matlab播放音乐
最近在做计算,写了一些matlab代码,脑壳还疼,所以决定发挥一下逗B精神,写一个程序玩一下. 想了想,既然写代码的时候喜欢听歌,而且我的电脑打开网易音乐的速度巨慢(不知道为什么..),那些一个程序直 ...
- go语言让windows发出声音,或者播放音乐
go语言让windows发出声音,或者播放音乐的例子:会发出alert警告的声音 ( 这是我应群员的求助写的, 如果你需要了解其中的调用原理或过程 或更多go语言调用win32api的资料,加群: 2 ...
- Inno调用dll --- 实现背景播放音乐
Inno 播放音乐可以调用系统api函数mciSendString来实现,而mciSendString函数存在C:\Windows\System32\winmm.dll中,因此最终只要成功从该dll文 ...
- 【分享】4412开发板ubuntu 12.0.4播放音乐没有声音解决方法
转自迅为论坛:http://bbs.topeetboard.com 准备工作 1.下载 vim 在命令行上输入 apt-get install vim 下载 vim 2.输入 vim /etc/hos ...
- 在Linux终端命令行下播放音乐的命令(Ubuntu)
现在的 Linux 桌面已经发展的很好了,在桌面下播放音乐操作起来也很简单.那么我们还记得在桌面不是那么好的时候我们是怎么播放音乐的么?哎,我是想不起来了,实在是太难了. 不过现在我们可以先安装一个小 ...
- C# 调用系统winmm.dll 播放音乐wav mp3
using System.Runtime.InteropServices;//放wav public partial class frmMain : Form { 系统放 播放音乐 wav mp3 [ ...
随机推荐
- java9新特性-14-多分辨率图像 API
1.官方Feature 251: Multi-Resolution Images 263: HiDPI Graphics on Windows and Linux 2.产生背景 在Mac上,JDK已经 ...
- DC、CDC及CDC的各个子类
设备描述表是一个包含设备信息的结构体(物理设备如显示器.打印机),MFC中关于图像操作都需要DC来完成.HDC是Windows的一种数据类型,是设备描述句柄:CDC是MFC封装的Windows 设 ...
- js中 '枚举' 的使用
习惯了.net编程,c#的枚举很好用,无论管理上,可读上,易用上都非常强大. JS作为弱类型解析语言,并没有严格的数据类型限定. “枚举”在JS中并不存在的. 通过定义上,枚举是一种类常量的存在,只不 ...
- mysql主从复制主服务器日志格式的区别
statement(语句级别,从服务器直接把语句拿来执行): 影响一大片(插入很多条或修改很多条),就适合用 statement row(行级别,从服务器直接 ...
- 关于ios11和Chrome浏览器非HTTPS 对高德定位不支持问题
最近,在开发二维码签到系统时,需要对用户的签到的经纬度进行获取,并且判断签到距离是否在可支持范围内. 使用了高德地图.因为本人最近刚刚入手了一款新的Iphone7里面是最新的ios11系统.发现我的手 ...
- NodeJS学习笔记 (25)逐行读取-readline(ok)
模块概览 readline是个非常实用的模块.如名字所示,主要用来实现逐行读取,比如读取用户输入,或者读取文件内容.常见使用场景有下面几种,本文会逐一举例说明. 文件逐行读取:比如说进行日志分析. 自 ...
- HDU-2303 The Embarrassed Cryptographer 高精度算法(大数取模)
题目链接:https://cn.vjudge.net/problem/HDU-2303 题意 给一个大数K,和一个整数L,其中K是两个素数的乘积 问K的是否存在小于L的素数因子 思路 枚举素数,大数取 ...
- CF732F Tourist Reform(边双联通)
题意 在一张有向图中,设 ri 为从点 i 出发能够到达的点的数量. 定义有向图的“改良值”为 ri 的最小值. 现给出一张无向图,要求给每条边定一个方向,使产生的有向图“改良值”最大. 输出 最大改 ...
- OpenJDK源码研究笔记(六)--观察者模式工具类(Observer和Observable)和应用示例
本文主要讲解OpenJDK观察者模式的2个工具类,java.util.Observer观察者接口,java.util.Observable被观察者基类. 然后,给出了一个常见的观察者应用示例. Obs ...
- legend---三、方法集思路
legend---三.方法集思路 一.总结 一句话总结:其实也就是工具包思路,会极大的简化编程,清晰逻辑 1.多if转换成简洁单if怎么实现? 下面这段代码是错的,if的这种写法只适合直接return ...