Meteor.js：當有人在簡單的聊天應用程序中收到消息時，我想播放聲音

Question

通過智能手機（android）發送消息時，在PC上的Chrome瀏覽器中會發出聲音，但是在手機上卻沒有聲音。 我用2台筆記本電腦進行了測試，現在可以與這些筆記本電腦一起使用，但是我手機的瀏覽器無法發出嗶聲。 目的是當我收到消息時聽到聲音。 奇怪的是，當我使用標准流星示例應用程序時，手機會發出聲音。 我的意思是，當您使用流星創建應用時，您會得到一個框架代碼，並且在click事件中插入了“ new Audio（'聲音文件的路徑'）.play（）;。它運行完美！

但是在我的應用程序中，它僅有時起作用，而在我的手機上則無法起作用。 我使用相同的音頻文件，並將其保存在流星應用程序的公用文件夾中。

var msgId=0;
var old=Session.get('msgCount');

Template.berichtenlijst.messages=function(){

    if(old<Session.get('msgCount')){//there is a new message in Message collection

        old=Session.get('msgCount');

        var array=Messages.find().fetch();

        if(array.length>0&&(msgId!==array[array.length-1]._id)){
            //notify new message

            new Audio('audio.mp3').play();
        }

    }



    return Messages.find({}, { sort: { timestamp: -1 },limit:100});


}

msgId有一個值，該ID來自Messages.insert（..），我已對其進行調試，這是正確的。 SESSION變量也是正確的變量。 通過示例應用程序，我還可以在移動設備上獲得聲音。 我不知道發生了什么。 抱歉，我知道這可能是一個模糊的問題，但對我來說這是一個模糊的問題。

Answer 1

我認為許多移動瀏覽器都會限制您播放聲音的能力，這些聲音並不能直接響應用戶的操作。

因此，您可以在click eventListener的回調中播放聲音...但是您不能在任意時間播放聲音（例如，作為對Websocket消息的響應）。

另外：傳統上，您通常要等到play播放，直到在音頻元素上觸發了canplaythrough事件為止，因此是這樣的：

var audio = new Audio('audio.mp3');
audio.addEventListener('canplaythrough', function() {
  audio.play();
});

Answer 2

我已經成功使用buzz.js（ https://github.com/brentjanderson/meteor-buzz.git ）。 之前，我曾嘗試使用“音頻”，但存在很多兼容性問題，而它可能在大多數現代瀏覽器中都可以使用，但在反應式設置中卻無法使用。

該應用程序基於更新會話和集合中的反應性事件播放聲音，並且在android應用程序以及大多數現代瀏覽器中都能正常工作。 但是，在android上，我注意到每次只能播放一種聲音（連續嘗試播放會取消當前播放的聲音）。

播放聲音非常簡單：

var audio = new buzz.sound('/sounds/warning.mp3');
audio.play();

Answer 3

這太困難了，擁有一個“ On New Data Function”（新數據功能）會很好。

相反，您需要為每封郵件吐出唯一的ID。 然后使用Jquery每1秒掃描最后一個。 將最后一個ID存儲在客戶端內存中，我只是在使用window變量。 然后，如果最后一條消息的ID在下一秒發生變化，請播放聲音。

但是通過這種方法，您將獲得自己的消息聲音。 因此，增加了更多的復雜性。 還將您的userId（）存儲在客戶端內存中，並比較新消息是來自我本人還是其他用戶。

{{#each chatMessages}}

                                        <div class="chat-message left" id="chatMessage_{{_id}}">
                                            <div id="owner_id" style="display:none;">{{owner_id}}</div>
                                            <a class="message-author" href="/people/{{username}}">
                                                <img class="message-avatar" src="{{avatar}}" alt="">
                                            </a>
                                            <div class="message">
                                                <a class="message-author" href="/people/{{username}}">{{title}}</a>
                                                <span class="message-date">{{timeAgo}}</span>
                                                    <span class="message-content">
                                                    {{content}}
                                                    </span>
                                            </div>
                                        </div>

                                    {{/each}}

    // Set last message seen on client
window.chatMessage_messageId = $(".chat-message:last").attr("id");
window.chatMessage_userId = $(".chat-message:last").attr("id");

setInterval( function(){ 

    // New message?
    if(window.chatMessage_messageId != $(".chat-message:last").attr("id") ){

        // Do I own this? (no sound)
        var owner = $("#"+window.chatMessage_messageId+" #owner_id").html();
        if(owner != Meteor.userId()){
            window.chatMessage_messageId = $(".chat-message:last").attr("id");

            ringAudio = new Audio('/sounds/chat_message.mp3'); 
            ringAudio.pause();
            ringAudio.currentTime = 0;
            ringAudio.play();
        }

    }

}, 1000);