1. 程式人生 > >HTML5:Animate cc互動之“聲音”功能 及 聲音 事件

HTML5:Animate cc互動之“聲音”功能 及 聲音 事件

SoundJS
    SoundJS庫管理網路上的音訊播放。它通過 '抽象出實際音訊實現' 的外掛來工作,所以可能在任何平臺上播放的,而不必瞭解聲音播放的機制。
 
    使用SoundJS,可以使用 'Sound' 類的公共API。該API是:
        安裝音訊播放外掛
        註冊(和預載入)聲音
        建立和播放聲音
        主音量、靜音以及一次性停止對所有聲音的控制
 
    控制聲音
        播放聲音,會建立 'AbstractSoundInstance' 例項,該例項可以單獨進行控制。
            暫停、恢復、搜尋、停止聲音
            控制聲音的音量、靜音、聲像
            監聽聲音例項的事件,播放完成、迴圈、失敗時觸發通知
 
    示例:    
        createjs.Sound.alternateExtensions = ['mp3'];
        createjs.Sound.on('fileload', this.loadHandler, this);
        createjs.Sound.resisterSound('path/sound/聲音.ogg', 'sound1');
        function loadHandler(event){
            // 每個註冊的聲音都會觸發
            var instance = createjs.Sound.play('sound1');    // 播放指定id的聲音(這裡是上面註冊的 'sound1'),也可以使用 '聲音的全路徑' 或 'event.src'
            instance.on('complete', this.handleComplete, this);
            instance.volume = 0.5;
        }
 
    瀏覽器支援:
        音訊可以在支援 'Web Audio'(http://caniuse.com/audio-api) 或 'HTMLAudioElement'(http://caniuse.com/audio) 的瀏覽器上使用。Flash fallback可用於任何支援Flash播放器的瀏覽器,Cordova外掛可用於任何支援 Cordova.Media 的web檢視。不支援IE8和更早版本,及時是 Flash fallback 也不支援。要支援以前的瀏覽器,可使用舊版本的SoundJS(0.5.2之前)
 
    大致看了下提供的類檔案,有分類特性:
 
        // Sound庫其他
        SoundJS
        Sound
        AudioSprite
        PlayPropsConfig
 
        // 2個基類
        AbstractPlugin
        AbstractSoundInstance
 
        // 上面提到的4個不同的外掛
        WebAudioLoader
        WebAudioPlugin
        WebAudioSoundInstance
 
        HTMLAudioPlugin
        HTMLAudioSoundInstance
        HTMLAudioTagPool
 
        FlashAudioLoader
        FlashAudioPlugin
        FlashAudioSoundInstance
 
        CordovaAudioLoader
        CordovaAudioPlugin
        CordovaAudioSoundInstance
 
        // 額外的事件物件
        ErrorEvent
 
        // CreateJS 套件裡公共部分
        Event
        EventDispatcher
        Utility Methods
 
1.SoundJS
    SoundJS 是一個靜態類,可獲取類庫的具體資訊,例如:庫的版本、構建日期等。SoundJS類已經被重新命名為 Sound。檢視 'Sound' 獲取更多資訊
 
2.Sound
    Sound類是公共API,用於建立聲音,控制整體聲音級別,以及管理外掛。該類上所有的聲音API都是靜態的。
 
    註冊和預載入
        播放聲音前,必須先進行註冊。可以使用 'registerSound' 方法,註冊多個聲音使用 'registerSounds' 方法。如果在 使用 'play' 方法來嘗試播放它,或使用 'createInstance' 來建立它 之前,沒有註冊聲音,將會自動註冊聲音源,但是播放將會失敗,因為聲音源還未準備好。如果使用 'PreloadJS',則會在預載入聲音時,自動處理聲音註冊。建議預先載入聲音,不管是通過內部的註冊函式還是外部的 'PreloadJS',以便在使用聲音時準備就緒。
 
    播放
        在聲音註冊和預載入後,立即播放聲音,使用 'play' 方法。該方法返回一個 'AbstractSoundInstance' 例項,可以用來暫停、恢復、靜音等操作。可以檢視 'AbstractSoundInstance' 獲取更多資訊。
 
    外掛
        預設情況下,使用 'WebAudioPlugin' 或 'HTMLAudioPlugin' 外掛(當可用時),但開發人員可以更改外掛優先順序,或新增新的外掛(例如:提供的 'FlashAudioPlugin' 外掛)。安裝外掛,或指定不同的外掛順序,檢視 'Sound/intallPlugins'。
 
    示例:
        createjs.FlashAudioPlugin.swfPath = '../src/flashaudio';
        createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.FlashAudioPlugin]);
        createjs.Sound.alternateExtensions(['mp3']);
        createjs.Sound.on('fileload', this.loadHandler, this);
        createjs.Sound.registerSound('path/sound/聲音.ogg', 'sound1');
        function loadHandler(event){
            // 每個註冊的聲音都會觸發
            var instance = createjs.Sound.play('sound1');    // 播放指定id的聲音(這裡是上面註冊的 'sound1'),也可以使用 '聲音的全路徑' 或 'event.src'
            instance.on('complete', this.handleComplete, this);
            instance.volume = 0.5;
        }
 
    可以在 'registerSound' 的 'data' 引數中,指定 '同一聲音同時播放的最大例項數'。注意:如果未置頂,則會使用預設的最大限制數。目前 'HTMLAudioPlugin' 預設限制為2,而 'WebAudioPlugin' 和 'FlashAudioPlugin' 預設限制為100。
 
        createjs.Sound.registerSound('聲音.mp3', 'sound1', 4);
 
    'Sound' 可以作為 'PreloadJS' 外掛使用,以幫助正確預載入音訊。通過 'PreloadJS' 預載入的音訊,會自動註冊到 'Sound' 類。當音訊未預載入時,'Sound' 將自動執行內部載入。因此,如果音訊未完成載入,可能會在第一次播放時,播放失敗。使用 'fileload' 事件可以確定,聲音什麼時候完成的預載入。建議在播放所有聲音前,預先載入。
 
        var queue = new createjs.LoadQueue();
        queue.installPlugin(createjs.Sound);
 
    音訊精靈(audio sprites - 音訊雪碧圖)
        從0.6.0版本後,'SoundJS' 增加了對 'AudioSprite' 的支援。對不熟悉 '音訊精靈' 的人來說,'音訊精靈' 類似 'CSS精靈' 或 '精靈表單':多個音訊資源分組合併到單個檔案中。
 
    示例:
        var assetsPath = './assets/';
        var sounds = [{
            src: 'MyAudioSprite.ogg', data: {
                audioSprite: [
                    {id: 'sound1', startTime: 0, duration: 500},
                    {id: 'sound2', startTime: 1000, duration: 400},
                    {id: 'sound3', startTime: 1700, duration: 1000}
                ]
            }
        }];
        createjs.Sound.alternateExtensions = ['mp3'];
        createjs.Sound.on('fileload', loadSound);
        createjs.Sound.registerSounds(sounds, assetsPath);
        // 載入完成後播放
        createjs.Sound.play('sound2');
 
    手機播放
        執行iOS的裝置需要通過在使用者發起的事件(例如觸控/點選)中播放至少一個聲音來“解鎖”WebAudio上下文。 早期版本的SoundJS包含了一個“MobileSafe”示例,但SoundJS 0.6.2不再需要這個示例。
            1.在SoundJS 0.4.1及以上版本中,您可以初始化外掛,也可以在使用者輸入事件的呼叫堆疊中使用playEmptySound方法手動解鎖音訊上下文
            2.在SoundJS 0.6.2及以上版本中,SoundJS將自動偵聽第一個文件級別的“mousedown”和“touchend”事件,並解鎖WebAudio。這將繼續檢查這些事件,直到WebAudio上下文變為“解鎖”(從“暫停”變為“正在執行”)
            3.“mousedown”和“touchend”事件都可以用來在iOS9 +中解鎖音訊,“touchstart”事件可以在iOS8及更低版本中使用。當手勢被解釋為“點選”時,“touchend”事件將僅在iOS9中起作用,所以如果使用者長按按鈕,它將不再起作用。
            4.當使用EaselJS Touch類時,由於MouseEvents被阻止,單擊畫布時,“mousedown”事件不會觸發,以確保只有觸控事件觸發。為了解決這個問題,你可以依靠“touchend”,或者:
                1.將Touch類建構函式的allowDefault屬性設定為true(預設為false)。
                2.將EaselJS Stage上的preventSelection屬性設定為false。
                這些設定可能會改變您的應用程式的行為,不建議。
 
    載入備用路徑和無擴充套件檔案
        'SoundJS' 支援載入備用路徑和無擴充套件檔案,通過給 'src' 屬性,傳遞一個物件來代替字串,該屬性是使用hash格式:{extension: 'path', extension2: 'path2'}。'SoundJS' 通過extension名,來判斷是否支援該格式的檔案。
 
        可以將不同格式的檔案,存放到不同的目錄下,或CDN上。
 
        按順序依次嘗試是否支援該格式,一旦支援則停止檢測。對於 'SoundJS' 內部載入或通過 'PreloadJS' 載入,都有效。
 
        注意:播放需要一個 'id'
 
        示例:
            var sounds = {
                path: './audioPath/',
                manifest: [
                    {id: 'cool', src: {mp3: 'mp3/聲音.mp3', ogg: 'ogg/聲音.ogg'}}
                ]
            };
 
    已知的瀏覽器和作業系統問題
        不翻譯了,看文件
 
3.AudioSprite
    注意:AudioSprite不是一個類,但是它的用法很容易在文件中被忽略,所以單獨提出來,可稱為快速參考。
 
    '音訊精靈' 很像 'CSS精靈' 或 影象 '精靈表單':將多個音訊資源分組合併為一個檔案。'音訊精靈' 可以解決某些瀏覽器的一次只能載入和播放一個聲音的限制。建議在音訊剪輯之間至少保持300ms的靜音,來處理HTML音訊標籤不準確的情況,以防止意外播放相鄰剪輯的音訊。
 
    音訊精靈的優點
        1.對於僅允許單個音訊例項的舊版瀏覽器和裝置提供更強大的支援(如:iOS 5)。
        2.為IE9 audio標籤限制提供瞭解決方法,IE9 audio 標籤嚴格限制了一次可以載入多種不同的聲音。
        3.載入更快,將多次請求合併為一次。特別是在移動裝置上,每個檔案的網路往返行程會有明顯延遲。
 
    音訊精靈的缺點
        1.使用HTML或Flash音訊時不能保證平滑的迴圈。如果需要平滑的迴圈,並且要支援非網路音訊的瀏覽器,儘量避免使用 '音訊精靈'
        2.不能保證HTML音訊會立即播放,特別是第一次播放。在某些瀏覽器(chrome!),HTML音訊只能以當前下載速度載入,所以我們依靠 'canplaythrough' 事件,來確定音訊是否已載入。因為 '音訊精靈' 必須跳到前方,來播放特定的聲音,音訊可能還沒有完全下載下來。
        3.'音訊精靈' 共享同樣的核心資源,因此,如果有一個包含5個聲音的 '音訊精靈',並且被限制只能同時播放2個例項,就只能同時播放2個聲音。
 
    示例:
        createjs.Sound.initializeDefaultPlugins();
        var assetsPath = './assets/';
        var sounds = [{
            src: 'MyAudioSprite.ogg', data: {
                audioSprite: [
                    {id: 'sound1', startTime: 0, duration: 500},
                    {id: 'sound2', startTime: 1000, duration: 400},
                    {id: 'sound3', startTime: 1700, duration: 1000}
                ]
            }
        }];
        createjs.Sound.alternateExtensions = ['mp3'];
        createjs.Sound.on('fileload', loadSound);
        createjs.Sound.registerSounds(sounds, assetsPath);
        // 載入完成後播放
        createjs.Sound.play('sound2');
 
    當建立新的 'AbstractSoundInstance' 時,也可以通過設定 'startTime' 和 'duration' 來線上建立 '音訊精靈'
 
        createjs.Sound.play('MyAudioSprite', {startTime: 1000, duration: 400});
 
    優秀的 CreateJS社群 已經建立了一個工具來建立 '音訊精靈',在https://github.com/tonistiigi/audiosprite 檢視原始碼,以及 'jsfiddle'(http://jsfiddle.net/bharat_battu/g8fFP/12/) 將輸出轉換為 SoundJS 格式。
 
4.PlayPropsConfig
    PlayPropsConfig 類,是一個儲存可選的播放屬性的類,以傳遞給 'Sound:play' 和 'AbstractSoundInstance:play' 呼叫。
 
    可選的播放屬性包括:
        interrupt - 如果已經播放了最大個數的聲音例項,如何中斷正在播放的具有相同資源的任意的音訊例項。可選值定義在 'Sound' 類的 'INTERRUPT_TYPE' 常量,預設由 'defaultInterruptBehavior' 定義。
        delay - 音訊開始播放的延遲時間,單位 'ms'
        offset - 音訊開始播放的偏移時間量,單位 'ms'
        loop - 音訊迴圈播放次數。預設是 '0-不迴圈', -1 - 無限迴圈
        volume - 聲音的音量,0-1之間。注意:主音量應用於單個音量
        pan - 聲音的左-右聲部(如果支援),在-1(左)和1(右)之間。
        startTime - 建立 '音訊精靈'(和 duration 一起使用) 開始播放和迴圈時的初始偏移量,單位 'ms' 
        duration - 建立 '音訊精靈'(和 startTime 一起使用) 播放剪輯的時間量,單位 'ms' 
 
    示例:
        var props = new createjs.PlayPropsConfig().set({interrupt: createjs.Sound.INTERRUPT_ANY, loop: -1, volume: 0.5});
        createjs.Sound.play('聲音.mp3', props);    // Sound:play
        mySoundInstance.play(props);            // AbstractSoundInstance:play
 
5.AbstractPlugin
    所有其他外掛類的基類
 
6.AbstractSoundInstance
    當呼叫 'Sound API' 的 'play' 或 'createInstance' 方法時,都會建立 'AbstractSoundInstance' 例項。根據當前活動外掛(4種不同外掛型別),返回 'AbstractSoundInstance' 例項,以供使用者後續控制
 
    示例:
        var myInstance = createjs.Sound.play('聲音.mp3');
 
    額外的附加引數,提供了一個快速方法,來決定如何播放聲音。請參閱 'Sound API' 的 'play' 方法,檢視播放參數列表
 
    一旦建立了 'AbstractSoundInstance',就可以儲存一個直接通過 'AbstractSoundInstance' 控制音訊的引用。如果未儲存引用,'AbstractSoundInstance' 將播放它的音訊(和任何迴圈),然後從 'Sound' 類取消引用,標記為可清除,之後被垃圾回收清除。如果音訊播放已完成,簡單的呼叫 'play' 方法,將重建引用,來控制聲音。
 
        var myInstance = createjs.Sound.play('聲音.mp3', {loop: 2});
        myInstance.on('loop', handleLoop);
        function handleLoop(event){
            myInstance.volume = myInstance.volume * 0.5;
        }
 
    當聲音播放完成、迴圈播放或播放失敗,事件分發會通知事件監聽器
        var myInstance = createjs.Sound.play('聲音.mp3', {loop: 2});
        myInstance.on('complete', handleComplete);
        myInstance.on('loop', handleLoop);
        myInstance.on('failed', handleFailed);
 
7.WebAudioLoader
 
8.WebAudioPlugin
 
9.WebAudioSoundInstance
 
10.HTMLAudioPlugin
 
11.HTMLAudioSoundInstance
 
12.HTMLAudioTagPool
 
13.FlashAudioLoader
 
14.FlashAudioPlugin
 
15.FlashAudioSoundInstance
 
16.CordovaAudioLoader
 
17.CordovaAudioPlugin
 
18.CordovaAudioSoundInstance
 
19.ErrorEvent
    通用錯誤事件,描述發生的錯誤,以及任何細節
 
// 下面幾個,在 CreateJS 套件裡是公共的
20.Event
 
21.EventDispatcher
 
22.Utility Methods
 

相關推薦

HTML5:Animate cc互動聲音功能 聲音 事件

SoundJS     SoundJS庫管理網路上的音訊播放。它通過 '抽象出實際音訊實現' 的外掛來工作,所以可能在任何平臺上播放的,而不必瞭解聲音播放的機制。       使用SoundJS,可以使用 'Sound' 類的公共API。該API是:         安裝音訊

HTML5:Animate cc互動聲音”的“開始、暫停功能

一、實現效果開啟第一個頁面,聲音是在播放的,點選按鈕,跳到下一個地方,開啟第2個聲音,2個聲音之間是不會衝突的。二、步驟1.確定An cc軟體的幀數中,有沒有加入聲音事件,不能加入逐幀聲音,會有衝突,如圖:a.幀標籤註釋,正確b.逐幀聲音,錯誤2.確定你已經有加了路徑的cre

HTML5:Animate cc互動點選1個“按鈕”執行多個事件功能

一、實現效果第1次點選按鈕可以執行第1個事件,第2次點選同一個按鈕,執行第2個事件,以此類推二、js程式碼var s = this; s.stop(); s.ayNum = 0; s.balloon.addEventListener("click", balloon1Clic

HTML5:Animate cc互動“影片剪輯中的繼續”功能

1.實現效果原由,因為在H5專案中,按鈕名稱不能重複問題,為了減少按鈕命名,可以使用“”影片剪輯“”,點選“”影片剪輯“”中的按鈕,舞臺上的當前幀跳轉到下一幀2.程式碼var s = this; s.stop(); if (!s.close_btn.hasEventListe

HTML5:Animate cc互動“多選、單選、單與多”功能

一、實現功能選擇題中有3中型別,“單選”“多選”“單多選”二、步驟a.單選var s = this; s.stop(); //隱藏提交按鈕、錯對框 s.right_case.visible = false; s.false_case.visible = false; s.s

HTML5:Animate cc互動視訊自動播放跳轉下一幀

1.實現功能一個視訊在播放,播放結束後,才能跳轉下一幀,播放第2個視訊,並跳到第3幀是沒有按鈕的!2.步驟:a.第一幀 this.frame_4 = function() { S = this; S.stop(); S.video1.on("added", fun

HTML5Animate cc互動功能製作單選框(開關)

1.需要實現的效果 2.步驟: a.實現點選功能 S.xld_btn1.txt.text="";//先將單選框的文字清空 //S.xld_btn1.txt.text是舞臺上的"xld_btn1影片剪輯",txt是指文字,text指文字內容 if(!S.xld

HTML5Animate cc互動功能跳轉下一幀

一 、實現使用者互動功能(點選按鈕跳轉下一幀)S.gotoAndStop解釋:跳轉到舞臺上的某一幀並停止S.gotoAndPlay解釋:跳轉到舞臺上的某一幀並開始播放下一幀方法1:跳轉幀數if (!S.next_btn1.hasEventListener("click"))

React Native與原生互動跳轉傳參

React Native(簡稱RN)開發的app大部分都可以在JS端完成,但是也有一些複雜的功能是需要原生端來完成的,或者是在原生專案中整合RN,此時RN與原生端就不可避免的需要進行互動,比如頁面跳轉和資料傳遞。 關於RN與原生更深層次的呼叫原理,及如何自己封

移動端app,mui頁面互動自定義偵聽事件

b.html程式碼 //引數1:處罰這個事件的頁面物件 //引數2:自定義事件名稱,自取 //引數3:傳值 Object 物件的形式 var homePage = plus.webview.currentWebview().opener();//獲取a頁面物件 var a = 1; mui.fi

Burp Suite截斷代理功能相關設定(一)

Burpsuite 1.burpsuite 簡介2.設定代理3.Target4.爬網模組5.掃描模組6.擴充套件模組7.intrude8.Repeater9.Sequencer10.Decoder11.Compare12.burpsuite 專案主配置資訊     1.burpsu

Pandas基本功能層次化索引層次化彙總

層次化索引 層次化也就是在一個軸上擁有多個索引級別 Series的層次化索引 data=Series(np.random.randn(10),index=[ ['a','a','a','b','b','b','c','c','d','d'], [1,2,3,1,2,3,1,2,2,3]

HTML5 APP應用實現圖片上傳拍照上傳功能

HTMl5 APP手機端程式碼:   <video id="myVideo" autoplay="autoplay"></video> <br /> <input type="button" value="拍照" />

Adobe Audition CC 2019中文免費版新功能安裝教程

Audition CC 2019免費版 是由Adobe官方推出的一款功能強大的音訊編輯軟體,提供好用的音訊處理、恢復和精確的編輯工具,大大加快視訊製作工作流程和音訊修正速度。Audition CC 2019帶來了新增了新增軌道並刪除空軌道、縮放至時間、效果和預設

作業系統處理機管理功能(2)程序通訊排程

1.程序通訊 當有一組相互合作的程序去完成一個共同的任務時,他們之間往往需要交換資訊。例如,有輸入程序、計算程序、列印程序三個相互合作的程序,輸入程序負責將所輸入的資料傳 送給計算程序、計算程序利用輸入資料進行計算,並把計算結果傳給列印程序;最後又列印程序把計算結果給打印出

解讀Dubbo原始碼ZooKeeper——主要功能原理

本文轉自:https://blog.csdn.net/weijifeng_/article/details/79775738 一 、Zookeeper功能簡介 ZooKeeper是一個開源的分散式協調服務,由雅虎建立,是Google Chubby的開源實現。分散式應用程式可以基於ZooKee

html5仿手機通訊錄按字母排序搜尋功能

1.實現聯絡人字母排序,點選字母跳轉顯示聯絡人組目錄;2.實現聯絡搜尋,動態顯示符合查詢的聯絡人;詳情見資源:https://download.csdn.net/download/huicaipa1943/10304104效果圖如下:<!DOCTYPE HTML PUB

ESP32那些事兒(六):功能開發藍芽WiFi功能

    我們的裝置類似藍芽音箱的功能,在使用a2dp的過程中也是有很多bug的,比方說暫停後雜音、藍芽聲音卡頓、系統panic等,希望後續的esp-idf都已經解決了,如果遇到類似的問題,我們也可以在部落格中討論,在此就不一一贅述了。

HTML5音訊播放,歌詞同步,視訊播放功能(JPlayer、JWPlayer、VideoJS)

最近專案中用到音訊視訊播放,所以就寫了一個demo: 這個是JPlayer外掛的視訊播放: 這個是音訊播放,歌詞同步: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">

【CreateJS】WebStorm+Adobe Animate CC 搭配開發HTML5,入門教程

目的:動畫設計師用Adobe Animate CC做好動畫素材,釋出好之後,交給程式設計師寫互動程式碼;在WebStorm之類的ide裡操縱 Animate 裡面的變數,class等。 前提環境: ①安裝好Adobe Animate CC ②安裝好WebStorm,或者