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

Question

我已尝试使用以下代码在新的未读电子邮件通知上播放音频警报。

新的电子邮件号码正在更新，但音频正在循环播放，这不是预期的（它应该只播放一次）。其次，在页面刷新或在其他页面移动时重播音频。

我想只显示一次通知更新+音频（无论是停留在同一页面还是移动到其他页面...）但音频应该播放如果新邮件在 之间到达并且未读邮件数量增加（此新的未读邮件数量已成功更新），请再次发送。

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'];
 }

Answer 1

您每次启用 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);
}

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

Play audio only once on new email notification

php

jquery

ajax

audio

opencart-3