Audio not playing in Chrome

Coding Help
1

Hi, I’d like some help with playing audio in Glitch. I’m trying to add background music to my site, and while it plays normally in the Glitch editor, when I open it in another tab (I use Chrome) it doesn’t play. I also don’t think it’s the code itself that’s not working as it has worked before for me. Here’s what I have right now (the code that doesn’t work):

2

you’ll probably have to look through this, there’s various rules about users having to click something before a website is allowed to play audio.

the thing about the music working in the editor may be one of those other rules about how when one website embeds another, it can let the embedded website play audio too. which that’s missing when you open your website in a new tab

3

thank you! do you know how to automatically play once the player interacts with the browser then?

4

they have this suggestion,

One cool way to engage users is to use muted autoplay and let them chose to unmute.

and there’s a code snippet showing how to use the muted attribute on the audio or video tag and making an unmute button with html and js

1 Like
5

i’ve tried this but it doesn’t work

6

I guess that’s what we get for following a blog post from…

Last updated 2017-09-13 UTC.

wait, but the opening sentence references something that would have happened later, and in past tense, no less

Chrome’s autoplay policies changed in April of 2018

something fishy is going on

can you fix it and post an updated code sample :pray:

7

i’m an amateur but i can try lol. i already have some code that does work (at least on the site i have). pasted below is the full code which might have something in it affecting when the audio plays:

<!DOCTYPE html>

<!-- tab code -->

<head>
  <title>Title</title>
  <link
    rel="icon"
    type="image/x-icon"
    href=""
  />

  <link rel="stylesheet" href="style.css" />
</head>

<!-- audio code -->

<audio autoplay loop>
  <source
    src="audio file went here"
    type="audio/mpeg"
  />
</audio>

<!-- text code -->

<html lang="en">
  <body>
    <p>
    </p>
  </body>
</html>
8

so this is without the unmute button?

9

Yeah.

I just tried the code in another empty project and it broke though. I’ll try look deeper into the site to find how the music autoplays without any user interaction. If you want, here’s the link: https://saladcult-com.glitch.me/

10

well they only suggested that it’s polite to put a button. from my reading of the page, it should be that you can wait for the user to click anywhere on the page

11

I still don’t understand what allows the music to play instantly

12

I figured out what happened. The music automatically plays in the glitch editor, while you have to go to a separate page to autoplay music in a normal browser. I’m assuming that if I were to use the same code in another site, I would have to leave and go back to the page to start the music. Here’s the code:

<audio autoplay loop>
  <source
    src="your_audio"
    type="audio/mpeg"
  />
</audio>

thanks wh0

13

…meaning you have to click? or something else? if the autoplay actually plays when you open the page a second time, maybe it’s that “media engagement index” they were talking about in the blog post

14

Also remember that there’s a very good reason why browser makers all agreed to disallow autoplay of audio: you have no idea where your user is, and what your audio’s going to do to their ears or their environment, so you don’t get to autoplay anything until after the browser’s been able to make sure the user has actually seen and interacted with your page.

Note that this also applies to video that has audio, but not muted video: that’s allowed to autoplay just fine.

Autoplaying audio is the best way to get your website added to everyone’s blacklists, if you want background music, get people to opt in (by interacting with your webpage) not opt out =)

2 Likes
15

I have a site showing this off: https://fearless-responsible-toaster.glitch.me/, but basically, the user has to go to a page separate from index.html (or just switch pages) for the music to be able to start playing. The user has to interact with the site before the audio can start playing.

1 Like
16

thanks yeah, that does seem like “media engagement index” doing its thing. kind of makes sense though, as developers could similarly build their site in a single-page-app way to collect a click event and play the audio

1 Like
17

I think (at least the way Chrome does it) that a site just has to have user interaction to be able to play audio. Not sure though.