HTML5播放暫停音樂

来源:http://www.cnblogs.com/roucheng/archive/2016/03/19/html5play.html
-Advertisement-
Play Games

查看效果:http://hovertree.com/code/jquery/ueyf7gn4.htm 代碼如下: 更多特效:http://www.cnblogs.com/roucheng/p/texiao.html


查看效果: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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 學習head first python一書的資料,Android、gae環境程式,sl4a_r3.apk,GoogleAppEngine-1.5.2.msi,GoogleAppEngine-1.5.2.msi等
  • 通過分析如下代碼,大致瞭解Disruptor的原理 1. 第2行代碼 EventFactory<LongEvent> eventFactory = new LongEventFactory(); 數據工廠類構造單個數據,disruptor使用此工廠類預分配數據。 2. 第5行代碼 final Dis
  • 沒看過前幾篇的可以猛戳這裡: underscore.js源碼解析(一) underscore.js源碼解析(二) underscore.js源碼解析(三) 本文解析的underscore.js版本是1.8.3 _.pluck的作用就是獲取數據對象中的相應屬性,然後存在數組當中返回 _.where就是
  • 1、HTML DOM 定義了訪問和操作HTML文檔的標準方法。 2、HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構(節點樹)。 3、通過 JavaScript,您可以重構整個 HTML 文檔。您可以添加、移除、改變或重排頁面上的項目。要改變頁面的某個東西,JavaScript
  • compass和sass相當於,jquery和javascript,一個是封裝的css庫,另一個是javascript庫,它們都目的是一樣的,簡化開發。 一般來說,安裝SASS的話,會自動幫助你安裝compass。如果不確認是否有安裝compass,在cmd中輸入 顯示 'compass' 不是內部
  • 你知道嗎?JavaScript可以為任何HTML元素添加任意的自定義屬性,而且你可能無意中已經使用過自定義屬性了,那麼自定義屬性通常有哪些應用呢? 1、想用“匹配”、對應關係的時候就用索引值 2、同時控制多組元素 3、開關切換,多組元素開關的切換 就總結到這裡,下麵來看看幾個例子吧 JavaScri
  • 《javaScript高級程式設計》第四章 讀書筆記 4.1 基本類型 和 引用類型 的值 1. 基本類型值 包括:Undefined、Null、Boolean、Number 和 String。 引用類型值 指那些可能由多個值構成的對象。【註意:字元串不是引用類型的】 2. 基本類型 在記憶體中占據固
  • 說到AngularJS,我們首先想到的大概也就是雙向數據綁定和指令系統了,這兩者也是AngularJS中最為吸引人的地方。雙向數據綁定呢,感覺沒什麼好說的,那麼今天我們就來簡單的討論下AngularJS這個框架的指令系統,本人也是初學,查閱了一些資料,要是有一些說的不好的地方,各位看官一笑而過便是,
一周排行
    -Advertisement-
    Play Games
  • 前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器,其界面簡潔大方,操作體驗流暢。該播放器支持多種音頻格式(如 MP4、WMA、OGG、FLAC 等),並具備標記、實時歌詞顯示等功能。 另外,還支持換膚及多語言(中英文)切換。核心音頻處理採用 FFmpeg 組件,獲得了廣泛認可,目前 Git ...
  • OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統,完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面,查看已創建應用的Client ID和Clien ...
  • 解決了這個問題:《winForm下,fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自:https://www.fcnsoft.com/Home/Sho ...
  • 國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面,接收裸 Win 32 的 WM_Pointer 消息,從消息裡面獲取觸摸點信息,使用觸摸點 ...
  • 前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能,還集成了高性能的輕量級 POS 解決方案,確保頁面載入速度極快,提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI: ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的,因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 問題 問題是這樣的:第三方的webapi,需要先調用登陸介面獲取Cookie,訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面,返回的Headers中沒有找到Cookie信息。 分析 首先,使用Postman測試該登陸介面,正常返回Cookie信息,說明是HttpCli ...
  • 國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低,主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上,.NET曾因微軟的閉源策略發展受限,儘管後來推出了跨平臺的.NET ...
  • 在WPF開發應用中,動畫不僅可以引起用戶的註意與興趣,而且還使軟體更加便於使用。前面幾篇文章講解了畫筆(Brush),形狀(Shape),幾何圖形(Geometry),變換(Transform)等相關內容,今天繼續講解動畫相關內容和知識點,僅供學習分享使用,如有不足之處,還請指正。 ...
  • 什麼是委托? 委托可以說是把一個方法代入另一個方法執行,相當於指向函數的指針;事件就相當於保存委托的數組; 1.實例化委托的方式: 方式1:通過new創建實例: public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...