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音频

回答

相关问题