您現在的位置是:電腦技術吧?>? 基礎知識 ??>??已為你切換到當前音效,切換音效??>??正文詳情

已為你切換到當前音效,切換音效

蒯曉絲2019-11-13 22:51:11 人圍觀
簡介耳機按下去才有聲音在交互中添加正確的聲音通常會改善用戶體驗。在我們熟悉的窗口中,刮紙清空回收站的聲音就是一個很好的例子。下面是一個小部件,它使用HTML5、jQuery向頁面添加

為交互添加恰當的音效,常常能改善用戶體驗。

在我們所熟悉的windows里,清空回收站的碎紙聲就是很好的例子。

下面是一個利用HTML5, Jquery,給頁面添加音效的小組件(只是添加音效,并不是播放器)。

其實很簡單,就是利用HTML5中的audio標簽,播放聲音。

不過為了照顧IE 6-8,還是用上了bgsound。

兼容所有主流瀏覽器(非主流不在考慮之列了)閑話少說,上代碼:a href=# class=fui-btn播放/ascript/*Play sound component*//* * profile: JSON, {src:'chimes.wav',altSrc:'',loop:false} * * setSrc: Function, set the source of sound * play: Function, play sound */if (!FUI){ var FUI = {};}FUI.soundComponent=function(profile){ this.profile={ src:'',          //音頻文件地址 altSrc:'',         //備選音頻文件地址 (不同瀏覽器支持的音頻格式不同,可見附表) loop:false        //是否循環播放,這個參數現在沒有用上 }; if(profile) { $.extend(this.profile,profile); } this.soundObj=null; this.isIE = !-[1,]; /*這個方法是前輩大牛發明的,利用ie跟非ie中JScript處理數組最后一個逗號,的差異, 不過對于IE 9,這個辦法就無效了,但此處正合我用,因為IE 9支持audio*/ this.init();};FUI.soundComponent.prototype={ init:function(){ this._setSrc(); }, _setSrc:function(){ if(this.soundObj){ if(this.isIE){ this.soundObj[0].src=this.profile.src; }else{ this.soundObj[0].innerHTML='source src=' this.profile.src ' /source src=' this.profile.altSrc ' /'; } }else{ if(this.isIE){ this.soundObj=$('bgsound volume=-10000 loop=1 src=' this.profile.src '').appendTo('body'); //-10000是音量的最小值。

先把音量關到最小,免得一加載就叮的一聲,嚇到人。

}else{ this.soundObj=$('audio preload=auto autobuffersource src=' this.profile.src ' /source src=' this.profile.altSrc ' //audio').appendTo('body'); } } }, setSrc:function(src,altSrc){ this.profile.src=src; if(typeof altSrc!='undefined'){ this.profile.altSrc=altSrc; } this._setSrc(); }, play:function(){ if(this.soundObj){ if(this.isIE){ this.soundObj[0].volume = 1;  //把音量打開。

this.soundObj[0].src = this.profile.src; }else{ this.soundObj[0].play(); } } }};var sd=new FUI.soundComponent({src:'ding.wav',altSrc:'ding.mp3'});$('.fui-btn').bind('click',function(e){ sd.play();}); /script附表 Format IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0 Ogg Vorbis No Yes Yes Yes No MP3 Yes No No Yes Yes Wav No Yes Yes Yes Yes Format IE9 Firefox3.5 Opera10.5 Chrome3.0 Safari3.0 OggVorbis No Yes Yes Yes No MP3 Yes No No Yes Yes Wav No Yes Yes Yes Yes

版權聲明:本文由 蒯曉絲 整理編輯。

原標題:什么是設備音效,設備音效怎么關

轉載注明出處:http://www.dn9ww09s.icu/basics/11968.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • USB共享網絡,usb共享網絡是什么意思

    USB共享網絡,usb共享網絡是什么意思 相關圖片小米usb共享網絡有網友說,USB共享網絡意味著我出差時經常沒有WiFi網絡。如果我能插上電腦上網,那就太好了,但是如何使用USB共享網絡呢?無論您的手機是通過流量還是WiFi,usb共享網...

  • html required,html用require

    html required,html用require 相關圖片html input默認值CSS3提示只適用于高級瀏覽器:Chrome Firefox Safari IE9 有效、無效和必需。定義代碼如下:input:required,input:Vhtmlinput中文驗證...

  • 手機導航安裝,怎么用手機導航

    手機導航安裝,怎么用手機導航 相關圖片手機導航哪個好現在手機已經成為我們生活中最不可或缺的一部分,手機的發展速度也日新月異。旅行,旅行不知道怎么走,移動導航是那么重要,更重要的是,也可以離線使用,是不...

  • 0xc0000001怎么修復,hp z4 g4安裝win7

    0xc0000001怎么修復,hp z4 g4安裝win7 相關圖片bios取消raid現在,重新安裝系統也是一件非常簡單的事情。安裝win7系統時遇到一些問題是最麻煩的事情。安裝win7系統時,系統會提示您找不到硬盤驅動器。通常會有兩種錯誤消息:安裝...

  • 導航條,如何做導航條

    導航條,如何做導航條 相關圖片橫向導航條第一步是創建一個新的my.html文件。按如下所示填寫內容。此HTML文件在結束之前不需要移動。它是內容:CSS代碼將內容復制到剪貼板!Doctypehtmlp導航條隱藏...

  • 開機進不了安全模式,安全模式也進不去系統

    開機進不了安全模式,安全模式也進不去系統 相關圖片筆記本電腦怎么按f8如果計算機無法正常啟動,可以使用“安全模式”或其他啟動選項啟動計算機。電腦啟動時按F8鍵,然后在“啟動模式”菜單中選擇“安全模式”。然而,有時我們發...

  • ai怎么讓畫布和圖片一樣大,如何讓畫布和圖片一樣大

    ai怎么讓畫布和圖片一樣大,如何讓畫布和圖片一樣大 相關圖片cdr怎么讓畫布和內容一樣大以下是10個HTML5畫布技術效果的演示,絕對會讓你大吃一驚。當然,你也可能認為,在過去,flash技術可以在老瀏覽器中實現這種效果。但是,以下演示僅使用...

  • 電腦虛擬內存不足,電腦顯示虛擬內存不足

    電腦虛擬內存不足,電腦顯示虛擬內存不足 相關圖片電腦虛擬內存不足是什么原因一個用戶在使用win10系統的過程中,電腦總是提示“虛擬內存不足,會關閉應用程序”,怎么回事?此用戶應將虛擬內存設置得太低。在這種情況下,我們只...

  • 背景,展示背景圖

    背景,展示背景圖 相關圖片企業文化背景圖片展示! DOCTYPE HTML head metahttp equiv=content type content=text/HTML;charset=UTF-8/產品展示背景圖片...

  • wifi網絡受限,wifi網絡受限怎么辦

    wifi網絡受限,wifi網絡受限怎么辦 相關圖片wifi連接上不能上網怎么辦WiFi是一種允許電子設備連接到無線局域網(WLAN)的技術,通常使用2.4G UHF或5g SHF ism射頻頻段。連接到WLAN通常受密碼保護。下面是小編收wifi可以連接但不能上網...

熱評文章

  • 本地連接ip地址怎么設置,設置本地連接

    本地連接ip地址怎么設置,設置本地連接 相關圖片怎么啟用本地連接事實上,建立本地IP通常是在intranet中。在我們常見的網絡環境(如路由器和交換機)中,我們經常需要設置本地連接IP。如何設置本地連接IP?我相信大多數用戶w7本地...

  • 打印機如何共享打印,打印機共享無法打印怎么辦

    打印機如何共享打印,打印機共享無法打印怎么辦 相關圖片共享打印機已連接但無法打印在辦公室里,我們經常使用打印機共享功能,這樣大家打印文件就更方便了。當windows系統的用戶最近共享打印機時,系統提示:如果共享打印機拒絕訪問,...

  • 背景顏色,換背景顏色

    背景顏色,換背景顏色 相關圖片word背景顏色htmlheadtitlexker.com/titlestyle.l1{背景:#ffffff}.l2{背景:#f4f4f4}/stylescriptfunctiwps背景顏色...

  • 安裝系統藍屏,系統藍屏

    安裝系統藍屏,系統藍屏 相關圖片裝win7藍屏計算機系統已經使用很長時間了,想改變一個系統。通常是重新安裝的。現在系統的安裝非常簡單。許多用戶可以自己手動安裝系統。有時安裝系統時會出現計算機的藍屏。藍...

  • 純代碼,xib和純代碼

    純代碼,xib和純代碼 相關圖片純代碼 圖案!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1純代碼游戲...

  • 000007e藍屏,藍屏0ed

    000007e藍屏,藍屏0ed 相關圖片藍屏000008e很多用戶反映,這臺電腦剛買下來,藍屏錯誤碼ox0000007e無緣無故出現。0x0000007e error表示系統進程遇到問題,如果遇到此類問題,應該怎么辦?0x0000007e藍屏...

  • 草稿,草稿本怎么做

    草稿,草稿本怎么做 相關圖片草稿本怎么寫萬維網聯盟(W3C)發布了HTML5規范草案,這是html4十多年前發布以來的第一次重大修訂。在此期間,隨著開發人員逐漸將其應用程序遷移到web上,web已經從草稿怎么寫...

  • win7電腦安全模式怎么進,win7安全模式進不去

    win7電腦安全模式怎么進,win7安全模式進不去 相關圖片windows7安全模式如果電腦出了問題,不能進入系統怎么辦?計算機出現問題的原因有很多。我們可以讓電腦進入安全模式,希望能幫助你找出問題和解決辦法。如何輸入具體要求?接下來...

  • 規范書寫,9的規范書寫

    規范書寫,9的規范書寫 相關圖片生字書寫規范方法我寫了這么長時間的CSS,但是大部分前端用戶沒有按照好的CSS編寫規范編寫CSS代碼,這會影響代碼的閱讀體驗。這里我總結了一個CSS的編寫規范和CSS的編寫順序數字零...

  • mrt文件用什么軟件打開,增強mrt是什么

    mrt文件用什么軟件打開,增強mrt是什么 相關圖片.bat是什么文件當我們認為大多數用戶會打開資源管理器來關閉一些不必要的流程以節省資源時,但是當我們看到很多流程時,我們不知道是否有任何影響。mrt.exe進程是許多用戶不知道它...

關注微信

变脸官网查询