Please add an example for sound playback

AndKe commented 3 years ago

Please add an option to play back callouts/alarm audio files when trigged.

The time from trigged to playing is important, so if the files are preloaded/cached on page load, and then the playback is just trigged.

No need for big files/high bitrates.

I suggest that the trigging could be done by setting a variable with the name of the file to be played:

            with self.update_lock:
                self.pfd.play.audio("stall.mp3")

dddomodossola commented 3 years ago

@AndKe Done ;-)

AndKe commented 3 years ago

@dddomodossola Thank you, looking forward to testing/using it this weekend.

AndKe commented 3 years ago

@dddomodossola Thank you ! the audio works great - except on glasses, but that has to be a simple issue of volume(maybe too low) - or format, I'll figure it out.

AndKe commented 3 years ago

@dddomodossola please try some other method or HTML5 The js does not seems to work.

at first I believed that I simply did not hear it due to low volume, or odd bitrate, but now I resampled it to 11025kbit and tried ogg audio too, and there is simply no sound.

AndKe commented 3 years ago

@dddomodossola I have verified that the code on https://hpr.dogphilosophy.net/test/ and https://www.computerhope.com/issues/ch000071.htm works fine. (play in any browser I tried, plus glass.)

dddomodossola commented 3 years ago

Hello @AndKe , tomorrow I will prepare this ;-)

dddomodossola commented 3 years ago

@AndKe Done, I reproduced this example https://www.computerhope.com/issues/ch000071.htm . Please let me know ;-)

AndKe commented 3 years ago

@dddomodossola Thank you - this is messing with my head.. I tried your change right away, I even had the same audio file from the computerhope site. Your code works, and make the PFD.py play fine... in a desktop browser... on glass - there is no sound - but then I open that URL in glass and play the audio just fine. This does not make much sense to me.

dddomodossola commented 3 years ago

@AndKe Maybe the incompatibility is caused by the source of command. In the websites where you tested the audio playback you initiated it by a manual action. In the PFD application the sound payback is initiated by javascript. Do you get console error messages when you expect to listen a sound?

AndKe commented 3 years ago

@dddomodossola I have no console for the glass browser, but may be able to find some logs..maybe or should I expect to see an error in the python console where PFD.py is running?

dddomodossola commented 3 years ago

Remi catches the browser error logs and prints them in the console. You should be able to see messages in the console, unless incompatibilities with glasses browser.

AndKe commented 3 years ago

@dddomodossola In my attempt to understand what is going on, I tried the code below (on another server) -in short: my top part, works fine (also on glass) , while the lower part fails to work (in any browser) -because I apparently messed up the time/delay code or something thereabout.

my idea was to simply try if a changing variable or some script could trigger a playback.

<html>
this works:
<div id="content">
  <div style="margin-bottom: 20px;">
    <button id="playButton" onclick="document.getElementById('myTune').play()">Play Music</button>
    <button id="pauseButton" onclick="document.getElementById('myTune').pause()">Pause Music</button>
    <button id="stopButton" onclick="document.getElementById('myTune').pause(); document.getElementById('myTune').currentTime = 0;">Stop Music</button>
  </div>

  <audio id="myTune" controls>
    <source src="sound.wav">
  </audio>
<br />
<br />
this does not work:

<audio id="player" src="sound.wav"></audio>   
<div>   
    <button onclick="out();">Start</button>
    <button onclick="document.getElementById('player').pause()">||</button>
    <br>
    <br>
    <button onclick="document.getElementById('player').volume+=0.1"> +</button>
    <button onclick="document.getElementById('player').volume-=0.1"> -</button>
</div> 

<script>
document.getElementById('player').play();
x = 5;
i = 0;
x2 = 5;
function out(){

var intervalID = setInterval(start, x2*1000);
 i++;
 if (i == x)
 {
     clearInterval(intervalID);
 }
}
function start(){
 document.getElementById('player').play();
}

</body>

There is no console output related to (/at the time of) playback of audio, the output below is that I usually get when running desktop browser + glass for a while (with some re-connects)

/usr/bin/python3.9 /home/andre/prog/PycharmProjects/PFD/PFDperf-A.py
remi.server      INFO     Started httpserver http://0.0.0.0:8081/
remi.server.ws   INFO     connection established: ('127.0.0.1', 50618)
remi.server.ws   INFO     connection established: ('127.0.0.1', 50630)
remi.server.ws   INFO     connection established: ('127.0.0.1', 50634)
remi.server.ws   INFO     connection established: ('127.0.0.1', 50646)
127.0.0.1 - - [03/May/2021 18:05:28] "HEAD / HTTP/1.1" 200 -
remi.request     INFO     built UI (path=/)
127.0.0.1 - - [03/May/2021 18:05:28] "GET / HTTP/1.1" 200 -
remi.server.ws   INFO     connection established: ('127.0.0.1', 50672)
remi.server.ws   INFO     handshake complete
127.0.0.1 - - [03/May/2021 18:06:11] "GET / HTTP/1.1" 200 -
remi.server.ws   ERROR    Error managing incoming websocket message
Traceback (most recent call last):
  File "/usr/local/lib/python3.9/dist-packages/remi/server.py", line 166, in read_next_message
    length = self.bytetonum(length[1]) & 127
IndexError: index out of range
127.0.0.1 - - [03/May/2021 18:06:11] "GET /res:style.css HTTP/1.1" 200 -
127.0.0.1 - - [03/May/2021 18:06:12] "GET /res:font.woff2 HTTP/1.1" 200 -
remi.server.ws   INFO     connection established: ('127.0.0.1', 50882)
remi.server.ws   INFO     handshake complete
192.168.1.1 - - [03/May/2021 18:08:51] "GET / HTTP/1.1" 200 -
192.168.1.1 - - [03/May/2021 18:08:51] "GET /res:style.css HTTP/1.1" 200 -
192.168.1.1 - - [03/May/2021 18:09:47] "GET / HTTP/1.1" 200 -
remi.server.ws   INFO     connection established: ('192.168.1.1', 45888)
remi.server.ws   INFO     handshake complete
remi.server.ws   ERROR    Error managing incoming websocket message
Traceback (most recent call last):
  File "/usr/local/lib/python3.9/dist-packages/remi/server.py", line 166, in read_next_message
    length = self.bytetonum(length[1]) & 127
IndexError: index out of range
192.168.1.1 - - [03/May/2021 18:12:34] "GET / HTTP/1.1" 200 -
remi.server.ws   INFO     connection established: ('192.168.1.1', 45909)
remi.server.ws   INFO     handshake complete
remi.server.ws   ERROR    Error managing incoming websocket message
Traceback (most recent call last):
  File "/usr/local/lib/python3.9/dist-packages/remi/server.py", line 166, in read_next_message
    length = self.bytetonum(length[1]) & 127
IndexError: index out of range
192.168.1.1 - - [03/May/2021 18:14:17] "GET / HTTP/1.1" 200 -
192.168.1.1 - - [03/May/2021 18:14:17] "GET /res:style.css HTTP/1.1" 200 -
remi.server.ws   INFO     connection established: ('192.168.1.1', 45912)
remi.server.ws   INFO     handshake complete
remi.server.ws   ERROR    Error managing incoming websocket message
Traceback (most recent call last):
  File "/usr/local/lib/python3.9/dist-packages/remi/server.py", line 166, in read_next_message
    length = self.bytetonum(length[1]) & 127
IndexError: index out of range
192.168.1.1 - - [03/May/2021 18:15:44] "GET / HTTP/1.1" 200 -
remi.server.ws   INFO     connection established: ('192.168.1.1', 45915)
remi.server.ws   INFO     handshake complete

AndKe commented 3 years ago

@dddomodossola here is some additional information; (please see previous post too) The browsers capabilities test by https://youtu.be/T8ONI_vMjdg

sorry for the hard-to-watch video, the screen mirroring is too slow for that. I also got an empty black area when testing http://featurejs.com/
And a completely white page testing https://cyscape.com/showbrow.asp
I suspect it does not run js at all. (if that is possible)

AndKe commented 3 years ago

@dddomodossola a significant discovery I have been told that many "modern browsers" will not play sounds unless the page is interacted with by the user. Supposedly does not really need to be a click, and could be other actions as well.

I've made a horrible test page that apparently can't even stop playing after 5 times: The great thing with this test is that once I click the "start" button, then the script can control the audio just fine. So the question is: can you think of some actions/events that could be used to trick the browser into thinking user did ..something to it? - maybe even a scrolling ?

my attempts to make sound with "document.onload" or "window.onload" fail, but calling the same function from a button works.

<html>
does not work:
<script>
document.getElementById('player').play();

function out(){
let x = 3;
let i = 0;
document.getElementById('player').play();
var intervalID = setInterval(start, 7000);
 i++;
 if (i == x)
 {
     clearInterval(intervalID);
 }
}

function start(){
 document.getElementById('player').play();
}

</script>
<body window.onload = out()>
<audio id="player" src="sound.wav"></audio>
<div>
    <button onclick="out();">Start</button>
    <button onclick="document.getElementById('player').pause()">||</button>
    <br>
    <br>
    <button onclick="document.getElementById('player').volume+=0.1"> +</button>
    <button onclick="document.getElementById('player').volume-=0.1"> -</button>
</div>
</body>

AndKe commented 3 years ago

@dddomodossola Audio is working great, so I am closing this issue.

dddomodossola commented 3 years ago

Well done @AndKe ;-)

dddomodossola / PFD

Please add an example for sound playback #21