查看效果：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. ViewBag 找不到编译动态表达式所需的一种或多种类型，是否缺少引用？

    症状: 类似上面的警告提示,运行程序不会有任何错误,但若干地方都提示警告,并且明明dll的引用都是正确的. 解决方案: 删除:C:\Users\{your computer name}\AppData ...

  2. ABP理论学习之应用服务

    返回总目录 本篇目录 IApplicationService接口 ApplicationService类 工作单元 数据库连接和事务管理 自动保存更改 更多 应用服务的生命周期 应用服务用于将领域逻辑 ...

  3. CSS调试小技巧 —— 调试DOM元素hover,focus,actived的样式

    最近学习html5和一些UI框架,接触css比较多,就来跟大家分享一下css中的一些调试技巧.之前做页面,css都是自己写的,所以要改哪里可以很快的找到,现在使用了UI框架,里面的样式是不可能读完的, ...

  4. [ASP.NET MVC 小牛之路]13 - Helper Method

    我们平时编程写一些辅助类的时候习惯用“XxxHelper”来命名.同样,在 MVC 中用于生成 Html 元素的辅助类是 System.Web.Mvc 命名空间下的 HtmlHelper,习惯上我们把 ...

  5. springboot之HelloWorld

    简介 为了简化开发Spring的复杂度,Spring提供了SpringBoot可以快速开发一个应用,这里就简单介绍下SpringBoot如何快速开发一个J2EE应用 HelloWorld 首先在gra ...

  6. [CORS：跨域资源共享] 同源策略与JSONP

    Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...

  7. Android开发学习之路-RecyclerView使用初探

    在进行一些MaterialDesign规范开发的时候,比如之前说到的CoordinateLayout实现的向上折叠效果的时候,如果依然使用ListView,那么这种效果是做不出来的,因为ListVie ...

  8. C#设计模式-享元模式

    在软件开发过程,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次地去申请内存空间了,这样可能会出现内存使用越来越多的情况,这样的问题是非常严重,然 ...

  9. jQuery 2.0.3 源码分析 样式操作

    根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...

  10. jQuery源码分析系列(37) : Ajax 总结

    综合前面的分析,我们总结如下3大块: jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求 前置过滤器 jQuery. ajaxPrefilter 请求分发器 jQuery ...