查看效果：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播放暂停音乐的更多相关文章

  1. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  2. Android 音视频深入 十四 FFmpeg与OpenSL ES 播放mp3音乐，能暂停（附源码下载）

    项目地址https://github.com/979451341/FFmpegOpenslES 这次说的是FFmpeg解码mp3,数据给OpenSL ES播放,并且能够暂停. 1.创建引擎 slCre ...

  3. 7款超具个性的HTML5播放器

    这篇文章我们要分享一些很有个性的HTML5音乐播放器和视频播放器,它们都具有播放器的大部分功能,并以HTML5和JavaScript实现.这些HTML5播放器有着非常漂亮的外观,很多你都无需自己重新定 ...

  4. HTML5播放器实例

    鉴于html5Audio and video的使用,设计了一个自定义风格的播放器,除实现一些基本的默认功能之外,还实现了一些高级功能. 具体功能如下: 实现播放暂停按钮 实现静音按钮 实现音量调节滑动 ...

  5. android音乐播放器开发 SweetMusicPlayer 播放本地音乐

    上一篇写了载入歌曲列表,http://blog.csdn.net/huweigoodboy/article/details/39856411,如今来总结下播放本地音乐. 一,MediaPlayer 首 ...

  6. HTML5 播放器

    之前一个前端群里 大牛 做了一个自适应的HMLT5播放器 最近根据其思路做了一个相对单一移动端的demo,demo用的图片和歌曲json的数据设计 都是群里大牛做的,在这谢谢~: 同时借鉴的几篇文章: ...

  7. Android如何判断当前手机是否正在播放音乐，并获取到正在播放的音乐的信息

    我想实现如下的场景,判断当前Android手机上是否正在播放音乐,如果是,通过某个特定的手势, 或者点击某个按键,将当前我正在听的音乐共享出去. 第一步,就是判断当前是否有音乐正在播放. 最开始我想得 ...

  8. js-音乐播放器，播放|暂停|滑块的功能

    音乐播放器,播放|暂停|滑块的功能 document.addEventListener('DOMContentLoaded', function loaded(event) { var audio = ...

  9. iOS音频播放之AudioQueue(一)：播放本地音乐

    AudioQueue简单介绍 AudioStreamer说明 AudioQueue具体解释 AudioQueue工作原理 AudioQueue主要接口 AudioQueueNewOutput Audi ...

随机推荐

  1. .NET中那些所谓的新语法之二：匿名类、匿名方法与扩展方法

    开篇:在上一篇中,我们了解了自动属性.隐式类型.自动初始化器等所谓的新语法,这一篇我们继续征程,看看匿名类.匿名方法以及常用的扩展方法.虽然,都是很常见的东西,但是未必我们都明白其中蕴含的奥妙.所以, ...

  2. .NET中那些所谓的新语法之四：标准查询运算符与LINQ

    开篇:在上一篇中,我们了解了预定义委托与Lambda表达式等所谓的新语法,这一篇我们继续征程,看看标准查询运算符和LINQ.标准查询运算符是定义在System.Linq.Enumerable类中的50 ...

  3. Redis系列(二)-Hredis客户端设计及开源

    接上篇c#实现redis客户端(一),重新整理些了下. 阅读目录: 项目说明 Hredis设计图 单元测试场景 总结 项目说明 背景:因为有地方要用,而又没找到对sentinel良好支持的Net客户端 ...

  4. [ASP.NET MVC 小牛之路]04 - 依赖注入(DI)和Ninject

    本人博客已转移至:http://www.exblr.com/liam  为什么需要依赖注入 在[ASP.NET MVC 小牛之路]系列的理解MVC模式文章中,我们提到MVC的一个重要特征是关注点分离( ...

  5. 我如何介绍 Microservice

    这篇文章转自我的 Github blog 一天我司招财猫姐(HR 大人)问我,你给我解释一下 Microservice 是什么吧.故成此文.一切都是从一个创业公司开始的. 故事 最近的创业潮非常火爆, ...

  6. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  7. python发送邮件及附件

    今天给大伙说说python发送邮件,官方的多余的话自己去百度好了,还有一大堆文档说实话不到万不得已的时候一般人都不会去看,回归主题: 本人是mac如果没有按照依赖模块的请按照下面的截图安装 导入模块如 ...

  8. Security7：View Usage

    一,在Database level上,主要有 sys.database_principals, sys.database_permissions 和 sys.database_role_members ...

  9. VS-默认端口导致项目不能加载的解决方案

  10. SQL Server中的高可用性（1）----高可用性概览

        自从SQL Server 2005以来,微软已经提供了多种高可用性技术来减少宕机时间和增加对业务数据的保护,而随着SQL Server 2008,SQL Server 2008 R2,SQL ...