查看效果：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. UI控件（UIToolbar）

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; _toolbar = [[UIToolbar all ...

  2. Intro to CSS 3D transforms

    原文地址:Intro to CSS 3D transforms,本文只是翻译了其中的一部分,省去了作者写文章的原因浏览器兼容部分(已经过时) Perspective 元素需要设置需要设置perspec ...

  3. SQL Azure (18) 使用External Table实现垮库查询

    <Windows Azure Platform 系列文章目录> 问题 1.我们在进行SQL Server开发的时候,经常会使用垮库查询.但是在默认情况下,使用Azure SQL Datab ...

  4. zookeeper分布式锁原理

    一.分布式锁介绍分布式锁主要用于在分布式环境中保护跨进程.跨主机.跨网络的共享资源实现互斥访问,以达到保证数据的一致性. 二.架构介绍在介绍使用Zookeeper实现分布式锁之前,首先看当前的系统架构 ...

  5. 【PRINCE2是什么】PRINCE2认证之七大原则

    经过前几讲中关于PRINCE2六大要素,四大步骤及整体思维架构的学习,相信各位看官已经对于PRINCE2有了大概的了解,那我们今天的学习内容会正式进入到七大原则内容的分享. 我们先来回顾一下,PRIN ...

  6. python 邮件基础篇

    python 操作邮件,不是很方便,说实话还不是理解的特别透彻,这次想把自己碰到的东西总结下来 邮件有imap,pop,imap协议,这次使用的是imap4协议,主要用了imap4和mail类, 代码 ...

  7. Python第一天 - 迭代

    (一)索引迭代 Python中,迭代永远是取出元素本身,而非元素的索引. 如果要取索引可以用enumerate()函数 例: L = ['Adam', 'Lisa', 'Bart', 'Paul'] ...

  8. 深入理解ajax系列第一篇——XHR对象

    × 目录 [1]创建对象 [2]发送请求 [3]接收响应[4]异步处理[5]实例演示 前面的话 ajax是asynchronous javascript and XML的简写,中文翻译是异步的java ...

  9. Android中Path类的lineTo方法和quadTo方法画线的区别

    转载:http://blog.csdn.net/stevenhu_223/article/details/9229337 当我们需要在屏幕上形成画线时,Path类的应用是必不可少的,而Path类的li ...

  10. hdu 2222 Keywords Search（AC自动机）

    /* 啥也不说了,直接套模板... */ 1 #include<iostream> #include<map> #include<string> #include& ...