在收到新电子邮件通知时只播放一次音频

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 标签。

我可以建议你两个解决方案:

  1. 你可以在音乐停止后去掉这个标签,这样就不会循环播放了
setTimeout(function(){
  if ($('#message_audio_alert').length > 0) {
    $('#message_audio_alert').remove();
  }
}, 5000)
  1. 您可以从 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);
}