0

I want to get real-time notifications with sound when an order is placed into my app. I'm using laravel 8 and pusher to that. I get real-time alerts but the sound does not work perfectly. When an order is placed first time sound does not play, after that sound is played perfectly. Here is my code structure ...

My event class

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

Here is the js code

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 => {
              });

      }
  }

Here is my controller

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

}

When I hit this route for the first time, real-time alert message is shown but the sound does not play. It shows this error

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

And it works perfectly after first time

I would like to give a sound notification to the admin if the order is placed, now how can I do that?

ihprince
  • 147
  • 1
  • 2
  • 17

1 Answers1

1

With the latest updates of browsers, it is now impossible to start a sound with the code without the user clicking a button.

Jeyhun Rashidov
  • 181
  • 3
  • 14
  • I would like to give a sound notification to the admin if the order is placed, now how can I do that? – ihprince Oct 20 '21 at 07:10
  • 1
    There is a good reason for this precaution: Users don't expect audio from websites. They get really angry when they load a website, and an audio advertisement blares at them at full volume. This is even worse if they opened multiple tabs and are not sure which one is responsible. That's why all browser vendors prevent websites from playing audio unless the user interacts with them. Yes, I understand that you want to use this feature for good and not evil, but if there was a workaround, that workaround could also be used by the advertisers. So be glad that such a workaround does not exist. – Jeyhun Rashidov Oct 20 '21 at 07:35
  • So the only real solution is to find some reason why the player would need to perform some form of interaction after the game HTML document is loaded. A good excuse is some kind of initial screen with a copyright message and other legalese which disappears after the user clicked on it. You can also use this splash screen as a preloader for the assets needed for your login screen. That makes sure the background music is actually loaded when a user with a low bandwidth connection sees it. – Jeyhun Rashidov Oct 20 '21 at 07:35