HTML5播放暂停音乐
查看效果：http://hovertree.com/code/jquery/ueyf7gn4.htm
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQuery播放音乐 - 何问起</title><base target=_blank />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel="stylesheet" href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="playHovertree btn btn-primary">播放</div>
<div class="pauseHovertree btn btn-primary">暂停</div>
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script> <script>
$(document).ready(function() {
var audioElementHovertree = document.createElement('audio');
audioElementHovertree.setAttribute('src', 'http://cms.hovertree.com/hovertreesound/hovertreesnow.mp3');
audioElementHovertree.setAttribute('autoplay', 'autoplay'); //打开自动播放
//audioElement.load() $.get(); audioElementHovertree.addEventListener("load", function() {
audioElementHovertree.play();
}, true); $('.playHover'+'tree').click(function() {
audioElementHovertree.play();
}); $('.pauseH'+'overtree').click(function() {
audioElementHovertree.pause();
});
});</script>
<br /><br />
By <a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/code/">代码</a>
</body>
</html>
更多特效：http://www.cnblogs.com/roucheng/p/texiao.html
HTML5播放暂停音乐的更多相关文章
- 31.JS实现控制HTML5背景音乐播放暂停
实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...
- Android 音视频深入 十四 FFmpeg与OpenSL ES 播放mp3音乐，能暂停（附源码下载）
项目地址https://github.com/979451341/FFmpegOpenslES 这次说的是FFmpeg解码mp3,数据给OpenSL ES播放,并且能够暂停. 1.创建引擎 slCre ...
- 7款超具个性的HTML5播放器
这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...
- HTML5播放器实例
鉴于html5Audio and video的使用,设计了一个自定义风格的播放器,除实现一些基本的默认功能之外,还实现了一些高级功能. 具体功能如下: 实现播放暂停按钮 实现静音按钮 实现音量调节滑动 ...
- android音乐播放器开发 SweetMusicPlayer 播放本地音乐
上一篇写了载入歌曲列表,http://blog.csdn.net/huweigoodboy/article/details/39856411,如今来总结下播放本地音乐. 一,MediaPlayer 首 ...
- HTML5 播放器
之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计 都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...
- Android如何判断当前手机是否正在播放音乐，并获取到正在播放的音乐的信息
我想实现如下的场景,判断当前Android手机上是否正在播放音乐,如果是,通过某个特定的手势, 或者点击某个按键,将当前我正在听的音乐共享出去. 第一步,就是判断当前是否有音乐正在播放. 最开始我想得 ...
- js-音乐播放器，播放|暂停|滑块的功能
音乐播放器,播放|暂停|滑块的功能 document.addEventListener('DOMContentLoaded', function loaded(event) { var audio = ...
- iOS音频播放之AudioQueue(一)：播放本地音乐
AudioQueue简单介绍 AudioStreamer说明 AudioQueue具体解释 AudioQueue工作原理 AudioQueue主要接口 AudioQueueNewOutput Audi ...
随机推荐
- .NET面试题系列[0] - 写在前面
.NET面试题系列目录 .NET面试题系列[1] - .NET框架基础知识(1) .NET面试题系列[2] - .NET框架基础知识(2) .NET面试题系列[3] - C# 基础知识(1) .NET ...
- Cisco VPN can't work in Win8
Goto HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\CvirtA Change DisplayName to "Cisco ...
- ASP.NET MVC 控制器激活(一)
ASP.NET MVC 控制器激活(一) 前言 在路由的篇章中讲解了路由的作用,讲着讲着就到了控制器部分了,从本篇开始来讲解MVC中的控制器,控制器是怎么来的?MVC框架对它做了什么?以及前面有的篇幅 ...
- 几个毫无节操纯属恶搞的JavaScript插件
fartscroll.js,为放屁而生 你知道么,有了这个js库,你的页面就可以——————————放屁勒! 打开下面的演示地址,然后滚动页面. 在线演示:http://theonion.github ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- Atitit 设计模式的本质思考】
Atitit 设计模式的本质思考] 1. 世界就是有模式构建的1 1.1. 多次模式与偶然模式1 1.2. 模式就是在一种场合下对某个问题的一个解决方案."1 1.3. 模式需要三样东西. ...
- Android笔记——判断程序是否第一次启动
public class Welcome extends Activity { private final long SPLASH_LENGTH = 2000; Handler handler = n ...
- web安全测试资料
最近因为工作需要,整理了安全测试工具AppScan的一个教程.目录如下: 网上对于appscan的资料挺多,但是也很乱很杂.不利于系统的学习,这也是我为什么整理这样一份指导手册. 在这份手册里,主要包 ...
- LINQ系列：Linq to Object串联操作符
串联是一个将两个对象联接在一起的过程.在LINQ中,串联操作将两个集合合并成一个集合,通过Concat操作符实现. Concat 1>. 原型定义 public static IQueryabl ...
- Jser 设计模式系列之面向对象 - 接口封装与继承
GOF在<设计模式>中说到:面向接口编程,而非面向实现编程 鉴于此,这个概念可见一斑! JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一 ...