如何使用laravel push获得带有声音的实时通知?

Question

我想在订单进入我的应用程序时获得实时的声音通知。我使用的是laravel 8和push。我收到了实时警报，但声音并不完美。当一个订单第一次放置声音不播放，之后声音播放完美。下面是我的代码结构:

我的事件类

<?php
namespace AppEvents;
use IlluminateBroadcastingChannel;
use IlluminateBroadcastingInteractsWithSockets;
use IlluminateBroadcastingPresenceChannel;
use IlluminateBroadcastingPrivateChannel;
use IlluminateContractsBroadcastingShouldBroadcast;
use IlluminateFoundationEventsDispatchable;
use IlluminateQueueSerializesModels;
class MyEvent implements ShouldBroadcast
{
use Dispatchable, InteractsWithSockets, SerializesModels;
public $message;
public function __construct($message)
{
$this->message = $message;
}
public function broadcastOn()
{
return ['my-channel'];
}
public function broadcastAs()
{
return 'my-event';
}
}

下面是js代码

Pusher.logToConsole = true;
var pusher = new Pusher('***pusher key***', {
cluster: 'ap2'
});
var channel = pusher.subscribe('my-channel');
channel.bind('my-event', function(data) {
alert(data.message)
playAudio();
});
function playAudio() {
var x = new Audio('http://127.0.0.1:8000/backend/assets/notification.mp3');
// Show loading animation.
var playPromise = x.play();
if (playPromise !== undefined) {
playPromise.then(_ => {
x.play();.
})
.catch(error => {
});
}
}

这是我的控制器

public function store(){
event(new MyEvent('1 new order has been placed'));
return 'Success';
}

当我第一次击中这条路线时，显示实时警报信息，但不播放声音。它显示了这个错误

DOMException: play() failed because the user didn't interact with the document first. 
https://some link

第一次使用后效果很好

如果下了订单，我想给管理员一个声音通知，现在我该怎么做?

Answer 1

随着浏览器的最新更新，现在不可能在用户单击按钮的情况下使用代码启动声音。