Angular 2中的Javascript音頻

我一直在嘗試播放鏈接到Toast通知的音頻。我目前使用toastr.js。Angular 2中的Javascript音頻

toastr.warning(eventData.type); 
self.eventAudio[eventData.id] = {}; 
self.eventAudio[eventData.id].audio = new Audio(); 
self.eventAudio[eventData.id].audio.src = './images/someaudio.mp3'; 
self.eventAudio[eventData.id].audio.loop = true; 
self.eventAudio[eventData.id].audio.play();

eventData在ID密鑰的唯一ID：eventData.id。

我想要的是一個特定toastr通知，播放音頻和toastr.options.onHidden，我已經綁定內容的功能：

var self = this; 
toastr.options.onHidden = function() { 
    self.eventAudio[eventData.id].audio.pause(); 
} 
toastr.options.onclose = function() { 
    self.eventAudio[eventData.id].audio.pause(); 
} 
toastr.options.onCloseClick = function() { 
    self.eventAudio[eventData.id].audio.pause(); 
}

我現在面臨的問題是，該音頻是始終處於循環狀態，從未暫停，即使在吐司通知被隱藏後也沒有。這個問題是當吐司通知有多個實例時，比如我有2個或更多的通知。

我在做什麼錯了？請幫我預先感謝

來源

2017-04-21 CruelEngine

如果你使用'（）=> {'，而不是'函數（）{'，'然後只this'工作，你不需要說'self'黑客攻擊。 –

這是困難的，因爲toastr.js庫沒有通過任何可識別事件信息onHidden /的OnClose/onCloseClick回調。如果你看看源代碼，它會爲所有的吐司事件調用相同的options.onHidden（）函數。

if (options.onHidden && response.state !== 'hidden') { 
    options.onHidden(); 
}

https://github.com/CodeSeven/toastr/blob/master/toastr.js

現在你在做什麼是覆蓋每一個新的事件的回調函數。（如果您的最後一個event.id是abc，則每次關閉任何麪包時，它都會嘗試暫停與abc關聯的音頻。）

最簡單（也可能最爲用戶友好）的方法是創建一個音頻元素每次出現新的麪包時都會重新啓動。

var audio = new Audio(); 
audio.src = './audio/test.mp3'; 
audio.play(); 

toastr.options.onHidden = function() { 
    audio.pause(); 
} 
toastr.options.onclose = function() { 
    audio.pause(); 
} 
toastr.options.onCloseClick = function() { 
    audio.pause(); 
}

如果你需要它來保持連續播放，直到所有的祝酒詞被關閉，你可以有當沒有更積極的祝酒詞

來源

2017-04-21 14:56:00

感謝您的答覆.i使用jquery訪問特定的吐司，我會更新答案，我如何設法做到這一點。 – CruelEngine

我用jQuery來訪問UNIQUEID在那個暫停音頻反eventData.id。

toastr.warning()，toastr.success()，toastr.error()，toastr.info()取得輸入：message，title的通知。

var message = '<input type="hidden" id="eventId" value="'+ eventData.id +'"/>'; 
toastr.warning(message,eventData.type); 
$('.toast-warning').on('mouseleave',function(){ 
    var eventDataId = $(this).find('#eventId').val(); 
    self.eventAudio[eventDataId].pause(); 
    self.eventAudio[eventDataId].src =''; 
});

我結合的onHidden()，onclose()，onCloseclick()用：

$('.toast-warning').trigger('mouseleave');

由於<input>具有其類型爲隱藏，這不是在烤麪包通知可見，且i容易訪問的元件使用： $(this).find()。

用它來達到答案：Jquery toastr onHidden function

來源

2017-04-24 09:55:48 CruelEngine

Angular 2中的Javascript音頻

回答

相關問題