Open webcompat-bot opened 5 years ago
Thanks for the report, I was indeed able to reproduce the issue. I am able to play the sound once. If I play it again the sound is not heard and the pause button from the player is not responding.
Tested with: Browser / Version: Firefox Nightly 69.0a1 (2019-05-20), Chrome 74.0.3729.157 Operating System: Windows 10 Pro
This is the web page displayed in Firefox Nightly after I play the sound for the second time:
And this is the web page displayed in Chrome:
It looked strangely similar to https://bugzilla.mozilla.org/show_bug.cgi?id=1484233 but that's not it.
Note also it sometimes fail for me after two listening. And it seems due to the button not coming back to the play state. It stays in pause.
just for the context if it is using the YUI 3.17.2 outdated JS lib. That doesn't mean that's the cause of the issue.
once we click on the play widget,
<div
id="yui_3_17_2_1_1569364801343_223"
class="
yui3-widget
sqs-widget
sqs-audio-player
play-state-stopped
ready-state-initialized">
…
</div>
the sound is played. On the 2nd click
<div
id="yui_3_17_2_1_1569364801343_223"
class="
yui3-widget
sqs-widget
sqs-audio-player
play-state-stopped
ready-state-sound-loaded">
…
</div>
The widget appearance for the play button is controlled by CSS.
.sqs-audio-player.play-state-paused .controls:after,
.sqs-audio-player.play-state-stopped .controls:after {
content:' ';
display:block;
width:0;
height:0;
position:absolute;
top:10px;
left:15px;
border-left:solid 8px #a9a9a9;
border-top:solid 6px transparent;
border-right:solid 6px transparent;
border-bottom:solid 6px transparent
}
The fact that it stays with the playing icon shows that something is not being initialized properly once the sound has played.
08:50:32.189
Object { _kds: false, id: "yui_3_17_2_1_1569368263593_88", type: "mousedown", logSystem: false, silent: true, host: {…}, context: {…}, bubbles: false, emitFacade: false, contextFn: contextFn()
, … }
common-c1ca2f26e0a67ab9f7aca-min.en-US.js:formatted:52489
08:50:32.285
Object { _kds: false, id: "yui_3_17_2_1_1569368263593_90", type: "mouseup", logSystem: false, silent: true, host: {…}, context: {…}, bubbles: false, emitFacade: false, contextFn: contextFn()
, … }
common-c1ca2f26e0a67ab9f7aca-min.en-US.js:formatted:52489
08:50:32.290
Object { _kds: false, id: "yui_3_17_2_1_1569368263593_258", type: "click", logSystem: false, silent: true, host: {…}, context: {…}, bubbles: false, emitFacade: false, contextFn: contextFn()
, … }
common-c1ca2f26e0a67ab9f7aca-min.en-US.js:formatted:52489
mousedown, mouseup, then click.
It looks a bit racy. @wisniewskit could you help determine why it fails sometimes and why it doesn't fail.
So first click, sound is working.
mousedown { target: div.placeholder, buttons: 1, clientX: 45, clientY: 712, layerX: 20, layerY: 7 } common-641c85fd1a8100f9507d5-min.en-US.js:1:1498435
mousedown { target: div.placeholder, buttons: 1, clientX: 45, clientY: 712, layerX: 20, layerY: 7 } performance-9bc960b6bdd89646c9b46-min.en-US.js:1:22130
mouseup { target: div.placeholder , buttons: 0, clientX: 45, clientY: 712, layerX: 20, layerY: 7 } common-641c85fd1a8100f9507d5-min.en-US.js:1:1498435
click { target: div.placeholder, buttons: 0, clientX: 45, clientY: 712, layerX: 20, layerY: 7 } reactive_library_fy2019.js:1
click { target: div.placeholder, buttons: 0, clientX: 45, clientY: 712, layerX: 20, layerY: 7 } common-641c85fd1a8100f9507d5-min.en-US.js:1:1498435
Second click. the sound is not working.
mousedown { target: div#yui_3_17_2_1_1575267951549_324.placeholder, buttons: 1, clientX: 43, clientY: 710, layerX: 18, layerY: 5 } common-641c85fd1a8100f9507d5-min.en-US.js:1:1498435
mouseup { target: div#yui_3_17_2_1_1575267951549_324.placeholder, buttons: 0, clientX: 43, clientY: 710, layerX: 18, layerY: 5 } common-641c85fd1a8100f9507d5-min.en-US.js:1:1498435
click { target: div#yui_3_17_2_1_1575267951549_324.placeholder, buttons: 0, clientX: 43, clientY: 710, layerX: 18, layerY: 5 } reactive_library_fy2019.js:1
click { target: div#yui_3_17_2_1_1575267951549_324.placeholder, buttons: 0, clientX: 43, clientY: 710, layerX: 18, layerY: 5 } common-641c85fd1a8100f9507d5-min.en-US.js:1:1498435
The first time it plays, it goes through
if (t.target.ancestor(".placeholder", true)) {
this.play();
return;
}
It executes
play: function() {
var t = this.getProperty("PLAY_STATES");
s.player.setVolume(this.get("volume") / 100);
if (this._audio)
this.get("playState") !== t.PLAYING && this._audio.play();
else {
this._registerTrack();
this._audio.play();
}
this._set("playState", t.PLAYING);
},
And the issue is that it never goes back to the stopped
play_state.
It stays in playing
.
The first time it goes through
this._registerTrack();
this._audio.play();
because this._audio
is not defined yet. _registerTrack()
creates the _audio
object.
after one hoop
handlePlay: function t() {
a.activate(r);
a.player.playFrom(r.position);
},
r.position
= 0
and finally inside playFrom
this is this.audioEl.play();
which actually play the file.
audioEl
is <audio src="https://static1.squaresp…mp3/original/g_sound.mp3">
I can do as much as I want this.audioEl.play()
But surprisingly t.PLAYING
is still playing.
this._set("playState", t.PLAYING);
if I manually do this._set("playState", "stopped")
with a breakpoint just after the previous line.
the widget is reinitialized, and I can play it again.
The position needs to be reset too.
Let's push this to needscontact.
the contact info is support@pronuncian.com
or https://twitter.com/pronuncian
but they don't seem to be active at all. :/
Contacted.
URL: https://pronuncian.com/pronounce-g-sound
Browser / Version: Firefox 68.0 Operating System: Windows 10 Tested Another Browser: Yes
Problem type: Video or audio doesn't play Description: Firefox can do play audio just one time Steps to Reproduce: in this page, on playbar under "Listen to the 'g sound'" header, when i click on play (>) button, Firefox plays, but can not play again. Also i has tested on Safe browsing mode of Firefox. Does not work. but in Chrome i can play it whatever i want.
Browser Configuration
Console Messages:
From webcompat.com with ❤️