Can type="audio/mpeg" be placed inside the javascript?

JavaScript
1

I’ve been trying to figure this out, and if it can be done, how?

 function playAudio(player, button) {
    var src = button.getAttribute("data-audio");
    player.volume = 1.0;
    player.setAttribute("src", src);
    player.setAttribute("type", "audio/mpeg");
    player.play();
  }

And, how exactly would you know if it’s working in the code or not? Is there a way to test it?

2

Since type is not a valid attribute for the HTML audio element, all testing should show that it has no effect at all.

1 Like
3

According to this, the answer is yes. But how do you know it’s working inside the code?

How exactly would you go about testing it?

4

According to that, the answer is yes when putting it on a <source> element.

That is different from what your code is doing, where it updates the <audio> element instead.

1 Like
5

That’s in the javascript part, not the html.

There is no source.

6

How is that a problem? That JavaScript code creates a <source> element, and sets attributes on that element.

Whereas, your code retrieves a reference to the already existing <audio> element, and sets properties on that element.

What do you want to achieve here?

1 Like
7

I can add (“source”) to this?

 function playAudio(player, button) {
     var src = button.getAttribute("data-audio");
     player.volume = 1.0;
     player.setAttribute("src", src);
     player.setAttribute("type", "audio/mpeg");
     player.play();
   }
8

It would be more work and effort, and wouldn’t provide any benefit.

How do you think that it would help, to add a source element?

9

I wanted to know how to do it, and how you would test it to see if it worked.

More knowledge on how to do things.

10

How you would test to see if the source type worked, is to find a web browser that cannot play the media that you want to play. The type attribute prevents the web browser from starting to download media that it doesn’t know how to play.

11

If I did this, it shouldn’t be able to work then, correct?

player.setAttribute("type", "video/mp4");

 function playAudio(player, button) {
     var src = button.getAttribute("data-audio");
     player.volume = 1.0;
     player.setAttribute("src", src);
     player.setAttribute("type", "video/mp4");
     player.play();
   }
12

You can set type on the player all you like, but it has no effect, because player refers to the <audio> element, not a <source> element. Any attribute on an element that the browser doesn’t understand, it just simply ignores.

1 Like
13

I was reading this:

Each element also has a type attribute. This is optional, but it is advised that you include them — they contain the MIME types of the video files, and browsers can read these and immediately skip videos they don’t understand. If they are not included, browsers will load and try to play each file until they find one that works, taking even more time and resources.

14

Yes, that’s each <source> element. Are you failing to understand something here?

Your code doesn’t use the <source> element. Instead, your code sets the src property on a different element called the <audio> element.

2 Likes
15

I was reading about this, what exactly is its purpose, what’s it for, and what does it do?

What would be a reason why someone would include this in the code?

If I were to add it to this, as an exercise, how would it be done?

audio.canPlayType

Would this go inside the javascript, and it’s supposed to do something?

Definition and Usage

The canPlayType() method checks if the browser can play the specified audio type.

The canPlayType() method can return one of the following values:

"probably" - the browser most likely supports this audio type
"maybe" - the browser might support this audio type
"" - (empty string) the browser does not support this audio type

https://davidwalsh.name/detect-supported-audio-formats-javascript

https://i.imgur.com/ie4d5i0.png

16

The first line in this MDN page looks like a good description

2 Likes
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.