Asp Forum - test for autoplay - comp.lang.javascript

Andrew Poulos

1/21/2015 8:55:00 PM

iOS, for one, will not allow video to autoplay. The client would like
the elearning I'm developing to autoplay video. If a device cannot
autoplay then they want an instruction to appear that says something
like "Select Play to watch the video". So I need to be able to detect is
autoplay is possible.

I found this that looked worth trying

var AUTOPLAY = false;

(function() {
var mp3 = 'data:audio/mpeg;base64,/[ a data URI here ];

try {
var audio = new Audio();
audio.autoplay = true;

$(audio).on('play', function() {
AUTOPLAY = true;
});

audio.src = mp3;
} catch(e) {
// error
}
})();

Alas I don't understand "$(audio).on('play', function() {"

What is it doing?

Andrew Poulos

6 Answers

Scott Sauyet

1/21/2015 9:18:00 PM

Andrew Poulos wrote:

> [ ... detecting autoplay ... ]
> I found this that looked worth trying

Found where? Were there no further instructions?

> var AUTOPLAY = false;
>
> (function() {
> var mp3 = 'data:audio/mpeg;base64,/[ a data URI here ];
>
> try {
> var audio = new Audio();
> audio.autoplay = true;
>
> $(audio).on('play', function() {
> AUTOPLAY = true;
> });
> // [ ... several lines elided... ]
> })();
>
> Alas I don't understand "$(audio).on('play', function() {"
>
> What is it doing?

Well clearly the `$` function accepts the `audio` object and returns
an object with a property `on` mapped to a binary function:

on :: String -> Function -> void?

Presumably that object listens for events emitted by the `audio`
object and calls the callback function supplied. It's unclear if
that function is supplied any parameters and this instance just
doesn't bother listening for them. Nor is it clear if it would
do anything with the result of that callback function if the
function actually returned something.

I know that jQuery [1], which is traditionally aliased as `$`,
supplies such an `on` function on its wrapped objects. [2] I also
believe that it has some facility for handling custom events. So
my suspicion is that the `$` in that sample is meant to be jQuery,
and that it is connected through its custom events mechanism to
the `play` event of the `Audio` constructor described.

But it's only a guess.

[1]: http://j...
[2]: http://api.jque...

-- Scott

Andrew Poulos

1/21/2015 9:43:00 PM

On 22/01/2015 8:17 AM, Scott Sauyet wrote:
> Andrew Poulos wrote:
>
>> [ ... detecting autoplay ... ]
>> I found this that looked worth trying
>
> Found where? Were there no further instructions?
>
>> var AUTOPLAY = false;
>>
>> (function() {
>> var mp3 = 'data:audio/mpeg;base64,/[ a data URI here ];
>>
>> try {
>> var audio = new Audio();
>> audio.autoplay = true;
>>
>> $(audio).on('play', function() {
>> AUTOPLAY = true;
>> });
>> // [ ... several lines elided... ]
>> })();
>>
>> Alas I don't understand "$(audio).on('play', function() {"
>>
>> What is it doing?
>
> Well clearly the `$` function accepts the `audio` object and returns
> an object with a property `on` mapped to a binary function:
>
> on :: String -> Function -> void?
>
> Presumably that object listens for events emitted by the `audio`
> object and calls the callback function supplied. It's unclear if
> that function is supplied any parameters and this instance just
> doesn't bother listening for them. Nor is it clear if it would
> do anything with the result of that callback function if the
> function actually returned something.
>
> I know that jQuery [1], which is traditionally aliased as `$`,
> supplies such an `on` function on its wrapped objects. [2] I also
> believe that it has some facility for handling custom events. So
> my suspicion is that the `$` in that sample is meant to be jQuery,
> and that it is connected through its custom events mechanism to
> the `play` event of the `Audio` constructor described.
>
> But it's only a guess.
>
>
> [1]: http://j...
> [2]: http://api.jque...

I searched and found other instances of the above code and found the
"original" at <https://gist.github.com/aaronkahlhamer/8...

Anyhow I'm going to test replacing the jq bit with

audio.addEventListener('play', function () {
AUTOPLAY = true;
});

Thanks
Andrew Poulos

Thomas 'PointedEars' Lahn

1/21/2015 10:04:00 PM

Andrew Poulos wrote:

> I found this that looked worth trying
>
> var AUTOPLAY = false;
>
> (function() {
> var mp3 = 'data:audio/mpeg;base64,/[ a data URI here ];
>
> try {
> var audio = new Audio();
> audio.autoplay = true;
>
> $(audio).on('play', function() {
> AUTOPLAY = true;
> });
>
> audio.src = mp3;
> } catch(e) {
> // error
> }
> })();
>
> Alas I don't understand "$(audio).on('play', function() {"
>
> What is it doing?

This is the jQuery way of adding an event listener for the â??playâ? event to
the element referred to by â??audioâ?. Apparently the standards-compliant

audio.onplay = function () {
AUTOPLAY = true;
};

was too hard for them :->

This code creates an â??audioâ? element in memory (using a proprietary
approach; the standards-compliant approach would be
â??document.createElement("audio")â?) and sets its â??autoplayâ? property, thereby
the â??autoplayâ? attribute of the corresponding element, to â??trueâ?. The
assumption is that if autoplay is supported, the â??playâ? event is fired
immediately after the â??srcâ? property was assigned to, thereby the â??srcâ?
attribute was set, to refer to an MPEG-1/2 Audio Layer â?¢ (mp3) resource by
â??data:â? URI. In that case, the value of the global â??AUTOPLAYâ? variable
(both misguided and misplaced) is set to â??trueâ?.

This approach may or may not work as it may or may not be based on flawed
logic. One issue of several is that a decoder for mp3 may not be installed
in a browser on a mobile device.

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Christoph M. Becker

1/21/2015 10:35:00 PM

Thomas 'PointedEars' Lahn wrote:

> Andrew Poulos wrote:
>
>> $(audio).on('play', function() {
>> AUTOPLAY = true;
>> });
>>
>> Alas I don't understand "$(audio).on('play', function() {"
>>
>> What is it doing?
>
> This is the jQuery way of adding an event listener for the â??playâ? event to
> the element referred to by â??audioâ?. Apparently the standards-compliant
>
> audio.onplay = function () {
> AUTOPLAY = true;
> };
>
> was too hard for them :->

I had only found the onplay property of the MediaController
interface[1], but have not been able to verify that the HTMLAudioElement
interface is supposed to inherit MediaController. Where is that specified?

> This code creates an â??audioâ? element in memory (using a proprietary
> approach; the standards-compliant approach would be
> â??document.createElement("audio")â?)

It seems to me the Audio constructor is specified in the W3C HTML5
Recommendation.[2]

[1]
<http://www.w3.org/TR/html5/embedded-content-0.html#handler-mediacontroller-...
[2] <http://www.w3.org/TR/html5/embedded-content-0.html#dom...

--
Christoph M. Becker

Thomas 'PointedEars' Lahn

1/22/2015 12:11:00 AM

Christoph M. Becker wrote:

> Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> [â?¦] I don't understand "$(audio).on('play', function() {"
>>>
>>> What is it doing?
>>
>> This is the jQuery way of adding an event listener for the â??playâ? event
>> to the element referred to by â??audioâ?. Apparently the standards-
>> compliant
>>
>> audio.onplay = function () {
>> AUTOPLAY = true;
>> };
>>
>> was too hard for them :->
>
> I had only found the onplay property of the MediaController
> interface[1], but have not been able to verify that the HTMLAudioElement
> interface is supposed to inherit MediaController. Where is that
> specified?

GlobalEventHandlers which is implemented by HTMLElement which is inherited
by HTMLMediaElement which is inherited by HTMLAudioElement.

>> This code creates an â??audioâ? element in memory (using a proprietary
>> approach; the standards-compliant approach would be
>> â??document.createElement("audio")â?)
>
> It seems to me the Audio constructor is specified in the W3C HTML5
> Recommendation.[2]

I stand corrected.

> [â?¦]
> [2] <http://www.w3.org/TR/html5/embedded-content-0.html#dom...

--
PointedEars
FAQ: <http://PointedEars.... | SVN: <http://PointedEars.de...
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-...
Please do not cc me. / Bitte keine Kopien per E-Mail.

Christoph M. Becker

1/22/2015 1:15:00 PM

Thomas 'PointedEars' Lahn wrote:

> Christoph M. Becker wrote:
>
>> Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>> [â?¦] I don't understand "$(audio).on('play', function() {"
>>>>
>>>> What is it doing?
>>>
>>> This is the jQuery way of adding an event listener for the â??playâ? event
>>> to the element referred to by â??audioâ?. Apparently the standards-
>>> compliant
>>>
>>> audio.onplay = function () {
>>> AUTOPLAY = true;
>>> };
>>>
>>> was too hard for them :->
>>
>> I had only found the onplay property of the MediaController
>> interface[1], but have not been able to verify that the HTMLAudioElement
>> interface is supposed to inherit MediaController. Where is that
>> specified?
>
> GlobalEventHandlers which is implemented by HTMLElement which is inherited
> by HTMLMediaElement which is inherited by HTMLAudioElement.

Thanks.

--
Christoph M. Becker

comp.lang.javascript

test for autoplay

Andrew Poulos

Scott Sauyet

Andrew Poulos

Thomas 'PointedEars' Lahn

Christoph M. Becker

Thomas 'PointedEars' Lahn

Christoph M. Becker

x Login to ForumsZone