如何使用 laravel pusher 获得实时声音通知？

Question

我想在我的应用下订单时获得实时的声音通知。我正在使用 laravel 8 和推送器。我收到实时警报，但声音无法正常工作。当第一次下订单时声音不播放，之后声音完美播放。这是我的代码结构...

我的活动课

  <?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

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

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