Question

在我的电脑上，当我通过智能手机（android）发送消息时，我在Chrome浏览器中收到声音但在我的手机上，我听不到声音。我用2台笔记本电脑进行了测试，现在可以使用它们但是我的手机浏览器没有发出哔哔声。我的目标是在收到消息时收到声音。奇怪的是，当我使用标准流星示例应用程序时，我的手机会发出声音。我的意思是当你使用meteor创建应用程序时，你会得到一个骨架代码并插入＆＃34;新音频（＆＃39;声音文件路径＆＃39;）。play（）;进入点击事件。它完美无缺！

但是在我的应用程序中，它只能在我的手机上运行。我使用相同的音频文件并将其放在meteor应用程序的公共文件夹中。

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消息的响应）。< / p>

另外：传统上你想等到调用播放，直到canplaythrough事件触发了音频元素，所以像这样：

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

Answer 2

我成功使用了buzz.js（https://github.com/brentjanderson/meteor-buzz.git）。我之前尝试过使用Audio时遇到很多兼容性问题，而它可能适用于最现代的浏览器，但不适用于被动设置。

应用程序根据来自更新会话和集合的被动事件播放声音，并且在Android应用程序以及大多数现代浏览器中都能正常运行。但是在android上我注意到每次只能播放一个声音（连续播放尝试取消当前播放的声音）。

播放声音非常简单：

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

Answer 3

这太难了，拥有“On New Data Function”本来不错。

相反，您需要为每条消息吐出唯一的ID。然后使用Jquery每1秒扫描一个最后一个。将最后一个ID存储在客户端内存中，我只是使用一个窗口变量。然后，如果最后一条消息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);

Meteor.js：当有人在简单的聊天应用程序中收到消息时，我想播放声音

3 个答案: