在收到新电子邮件通知时只播放一次音频
Play audio only once on new email notification
我已尝试使用以下代码在新的未读电子邮件通知上播放音频警报。
新的电子邮件号码正在更新,但音频正在循环播放,这不是预期的(它应该只播放一次)。其次,在页面刷新或在其他页面移动时重播音频。
我想只显示一次通知更新+音频(无论是停留在同一页面还是移动到其他页面...)但音频应该播放如果新邮件在 之间到达并且未读邮件数量增加(此新的未读邮件数量已成功更新),请再次发送。
Header HTML 和 php 部分:
<?php
$this->session->data['new_email_count'] = $this->model_extension_module_message_system->getTotalUnreadMessagesAjax();
?>
<li>
<a href="{{ link_message_system }}" >
<span class="label label-danger pull-left mt-10 unreadNotification" id="alert_messages"></span> <i class="fa fa-envelope fa-lg text-danger"></i>
</a>
<span id="audio_span"></span>
</li>
JS header:
<script>
function getNotification() {
$.ajax({
type: 'post',
url: 'index.php?route=extension/module/message_system/GetNewEmailNotification&user_token={{ user_token }}',
dataType: 'json',
success: function(data) {
$(".unreadNotification").text(data.count);
if(data.alerterror == 1) {
playAudio();
}
}
});
}
$(document).ready(function(){
setInterval(getNotification, 5000);
});
function playAudio() {
$("#audio_span").append('<audio nocontrols autoplay hidden="" id="message_audio_alert" src="../image/{{ audio_url }}" type ="audio/mp3">your browser does not support Html5</audio>');
}
</script>
controller php :(从ajax调用成功函数获取数据)
<?php
public function GetNewEmailNotification() {
$this->load->model('extension/module/message_system');
$this->language->load('extension/module/message_system');
$count= $this->model_extension_module_message_system->getTotalUnreadMessagesAjax();
if((isset($this->session->data['new_email_count'])) && ($this->session->data['new_email_count'] != $count)){
$alerterror = '1';
}else{
$alerterror = '0';
}
$setting_data['alerterror'] = $alerterror;
$setting_data['count'] = $count;
$this->response->addHeader('Content-Type: application/json');
$this->response->setOutput(json_encode($setting_data));
}
模型php函数:
<?php
public function getTotalUnreadMessagesAjax() {
$sql ="SELECT COUNT(*) AS total FROM " . DB_PREFIX . "messages WHERE message_id > 0 AND read_status='0' AND sender='customer'";
$query = $this->db->query($sql);
return $query->row['total'];
}
您每次启用 playAudio
功能时都会附加 audio
标签。
我可以建议你两个解决方案:
- 你可以在音乐停止后去掉这个标签,这样就不会循环播放了
setTimeout(function(){
if ($('#message_audio_alert').length > 0) {
$('#message_audio_alert').remove();
}
}, 5000)
- 您可以从
audio
标签中删除 autoplay
参数,在 HTML 文件的开头加载一次 audio
标签,然后只需启用和禁用它而不是每次出现请求时加载整个资源
<span id="audio_span">
<audio nocontrols hidden="" id="message_audio_alert" src="../image/{{ audio_url }}" type ="audio/mp3">your browser does not support Html5</audio>
</span>
function playAudio() {
let messageAudioAlert = $("#message_audio_alert")[0];
messageAudioAlert.play();
setTimeout(function () {
messageAudioAlert.pause();
messageAudioAlert.currentTime = 0;
}, 5000);
}
我已尝试使用以下代码在新的未读电子邮件通知上播放音频警报。
新的电子邮件号码正在更新,但音频正在循环播放,这不是预期的(它应该只播放一次)。其次,在页面刷新或在其他页面移动时重播音频。
我想只显示一次通知更新+音频(无论是停留在同一页面还是移动到其他页面...)但音频应该播放如果新邮件在 之间到达并且未读邮件数量增加(此新的未读邮件数量已成功更新),请再次发送。
Header HTML 和 php 部分:
<?php
$this->session->data['new_email_count'] = $this->model_extension_module_message_system->getTotalUnreadMessagesAjax();
?>
<li>
<a href="{{ link_message_system }}" >
<span class="label label-danger pull-left mt-10 unreadNotification" id="alert_messages"></span> <i class="fa fa-envelope fa-lg text-danger"></i>
</a>
<span id="audio_span"></span>
</li>
JS header:
<script>
function getNotification() {
$.ajax({
type: 'post',
url: 'index.php?route=extension/module/message_system/GetNewEmailNotification&user_token={{ user_token }}',
dataType: 'json',
success: function(data) {
$(".unreadNotification").text(data.count);
if(data.alerterror == 1) {
playAudio();
}
}
});
}
$(document).ready(function(){
setInterval(getNotification, 5000);
});
function playAudio() {
$("#audio_span").append('<audio nocontrols autoplay hidden="" id="message_audio_alert" src="../image/{{ audio_url }}" type ="audio/mp3">your browser does not support Html5</audio>');
}
</script>
controller php :(从ajax调用成功函数获取数据)
<?php
public function GetNewEmailNotification() {
$this->load->model('extension/module/message_system');
$this->language->load('extension/module/message_system');
$count= $this->model_extension_module_message_system->getTotalUnreadMessagesAjax();
if((isset($this->session->data['new_email_count'])) && ($this->session->data['new_email_count'] != $count)){
$alerterror = '1';
}else{
$alerterror = '0';
}
$setting_data['alerterror'] = $alerterror;
$setting_data['count'] = $count;
$this->response->addHeader('Content-Type: application/json');
$this->response->setOutput(json_encode($setting_data));
}
模型php函数:
<?php
public function getTotalUnreadMessagesAjax() {
$sql ="SELECT COUNT(*) AS total FROM " . DB_PREFIX . "messages WHERE message_id > 0 AND read_status='0' AND sender='customer'";
$query = $this->db->query($sql);
return $query->row['total'];
}
您每次启用 playAudio
功能时都会附加 audio
标签。
我可以建议你两个解决方案:
- 你可以在音乐停止后去掉这个标签,这样就不会循环播放了
setTimeout(function(){
if ($('#message_audio_alert').length > 0) {
$('#message_audio_alert').remove();
}
}, 5000)
- 您可以从
audio
标签中删除autoplay
参数,在 HTML 文件的开头加载一次audio
标签,然后只需启用和禁用它而不是每次出现请求时加载整个资源
<span id="audio_span">
<audio nocontrols hidden="" id="message_audio_alert" src="../image/{{ audio_url }}" type ="audio/mp3">your browser does not support Html5</audio>
</span>
function playAudio() {
let messageAudioAlert = $("#message_audio_alert")[0];
messageAudioAlert.play();
setTimeout(function () {
messageAudioAlert.pause();
messageAudioAlert.currentTime = 0;
}, 5000);
}