zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    链表-(1)
    爬虫(10-3)验证码图片识别
    爬虫10-2(多线程爬虫)
    分布式爬虫系统的架构(19)
    pipenv管理Python虚拟环境
    peewee-async集成到tornado
    Python3笔记051
    Python3笔记050
    Python3笔记049
    Python3笔记048
  • 原文地址:https://www.cnblogs.com/roucheng/p/html5play.html
Copyright © 2011-2022 走看看