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 [ ...
随机推荐
- NAS是什么
NAS是什么 简介 NAS(Network Attached Storage:网络附属存储)按字面简单说就是连接在网络上,具备资料存储功能的装置,因此也称为“网络存储器”.它是一种专用数据存储服务器. ...
- 微信小程序领取卡券
微信小程序领取卡券 标签(空格分隔): php 开发前需要准备的工作 1 小程序和公众号要有绑定 2 小程序和该公众号要绑定到同一个开发平台下 [https://open.weixin.qq.com/ ...
- SparkCore基础(一)
* SparkCore基础(一) 学习Spark,首先要熟悉Scala,当然你说你会Python或者Java能不能玩Spark?能!但是不推荐,首推Scala,因为Scala非常便捷,而且Scala有 ...
- Android实现App版本自动更新
现在很多的App中都会有一个检查版本的功能.例如斗鱼TV App的设置界面下: 当我们点击检查更新的时候,就会向服务器发起版本检测的请求.一般的处理方式是:服务器返回的App版本与当前手机安装的版本号 ...
- RSA加密的方式和解密方式
RSAsecurity.java package com.mstf.rsa; import java.security.KeyFactory; import java.security.KeyPair ...
- <Sicily>Pythagorean Proposition
一.题目描述 One day, WXYZ got a wooden stick, he wanted to split it into three sticks and make a right-an ...
- [笔记-图论]Dijkstra
用于求正权有向图 上的 单源最短路 优化后时间复杂度O(mlogn) 模板 // Dijkstra // to get the minumum distance with no negtive way ...
- HNU 12933 Random Walks Catalan数 阶乘求逆元新技能
一个Catalan数的题,打表对每个数都求一次逆元会T,于是问到了一种求阶乘逆元的打表新方法. 比如打一个1~n的阶乘的逆元的表,假如叫inv[n],可以先用费马小定理什么的求出inv[n],再用递推 ...
- PatentTips - Compare and exchange operation using sleep-wakeup mechanism
BACKGROUND Typically, a multithreaded processor or a multi-processor system is capable of processing ...
- NYOJ 541 最强的战斗力
最强DE 战斗力 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 春秋战国时期,赵国地大物博,资源很丰富.人民安居乐业.但很多国家对它虎视眈眈.准备联合起来对赵国发起一 ...