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 [ ...
随机推荐
- poj--1789--Truck History(prim)
Truck History Time Limit: 2000MS Memory Limit: 65536KB 64bit IO Format: %I64d & %I64u Submit ...
- Benelux Algorithm Programming Contest 2014 Final(第二场)
B:Button Bashing You recently acquired a new microwave, and noticed that it provides a large number ...
- Hello World基于.net framework中CLR的执行
static void Main(string[] args) { Console.WriteLine("Hello,World!"); Console.WriteLine(&qu ...
- Java ——代理模式[转发]
1. 简介 代理模式(Proxy Pattern)是GoF 23种Java常用设计模式之一.代理模式的定义:Provide a surrogate or placeholder for anothe ...
- [SHOI2008]堵塞的交通(线段树维护联通性)
题目 2行c列个点,开始时互不联通,支持给同一列或着同一行相邻的两个点连边,和询问两个点能否在一个联通块里. 1≤C≤100000 1<=操作数<=100000; 题解 线段树的又一个骚操 ...
- CF85E Guard Towers(二分答案+二分图)
题意 已知 N 座塔的坐标,N≤5000 把它们分成两组,使得同组内的两座塔的曼哈顿距离最大值最小 在此前提下求出有多少种分组方案 mod 109+7 题解 二分答案 mid 曼哈顿距离 >mi ...
- hibernate 不与数据库对应的注解
@Transient 此注解必须写到get方法上
- Linux 常用命令:系统状态篇
前言 Linux常用命令中,有些命令可以用于查看系统的状态,通过了解系统当前的状态,能够帮助我们更好地维护系统或定位问题.本文就简单介绍一下这些命令. 1. 查看系统运行时间--uptime 有时候我 ...
- caioj 1084 动态规划入门(非常规DP8:任务安排)(取消后效性)
这道题的难点在于,前面分组的时间会影响到后面的结果 也就是有后效性,这样是不能用dp的 所以我们要想办法取消后效性 那么,我们就可以把影响加上去,也就是当前这一组加上了s 那么就把s对后面的影响全部加 ...
- Android 查看设备信息
借助getprop.dumpsys来了解一些系统相关信息. 一.getprop adb shell cat /system/build.prop 文件中存放的是用于启动系统时需要的配置文件,通常可以通 ...