Can we play sound of a video without user interaction?

Questions
, ,
1

Is there any way by which i could play the audio of sound.

Currently am playing the video with the sound muted and unmuting it when the user interacts with the document/ Canvas.
Can’t i achieve to play the video along with sound without interaction ?

Here’s my code -

/**
 * Video
 */
const videoElement = document.createElement("video");
videoElement.src = "../public/video.mp4";
videoElement.load();
videoElement.muted = true;

const videoTexture = new THREE.VideoTexture(videoElement);
videoTexture.colorSpace = THREE.SRGBColorSpace;
const spriteMaterial = new THREE.SpriteMaterial({ map: videoTexture });
const sprite = new THREE.Sprite(spriteMaterial);
scene.add(sprite);

videoElement.addEventListener("loadedmetadata", () => {
  videoTexture.needsUpdate = true;
  const originalWidth = videoElement.videoWidth;
  const originalHeight = videoElement.videoHeight;

  const desiredHeight = window.innerHeight;
  const ratio = originalHeight / desiredHeight;
  const desiredWidth = originalWidth / ratio;

  sprite.scale.set(desiredWidth, desiredHeight, 1);
  videoElement.play();
});

videoElement.addEventListener("ended", () => {
  videoElement.loop = true;
  videoElement.play();
});

setTimeout(() => {
  document.querySelector(".popup").classList.add("show");
  document.querySelector(".popup").style.display = "block";
}, 5000);

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
updateRendererProperties(sizes.x, sizes.y);
renderer.render(scene, camera);

canvas.addEventListener(
  "click",
  () => {
    console.log("called");
    videoElement.play().catch((error) => {
      console.error("Error attempting to play the video:", error);
    });
    videoElement.muted = false;
  },
  { once: true }
);
2

You can’t. It’s built in to the browser to require an initial click on the page before allowing audio playback.

I think you can autoplay the video, but the audio will be muted until first interaction.

This prevents spam/malware/popups from shouting scary things at the user.

1 Like
3

I got your point, Just need to know one thing, if user interaction is required with the document.
How is this video is played with sound? without interaction with the webpage on autoplay.

http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4

This video is available inside the sources of the gistfile1.txt
from the public test videos · GitHub

Can’t i somehow use the same technique to play the video?

4

I think if you open a media file URL directly it will play. Just not if embedded in a page, and probably not if you do window.location=“some.mp4”.

The browser knows the difference between a user explicitly navigating to a piece of media vs a script initiating it.

However you try to trick it… an army of Google engineers is working to prevent that.

5

The link you provided is playing the sound because the media file is embedded in a media player. The audio runs when the user hits the play button or if you make a timeout function to make the play button play automatically. This way you can make the isPlaying variables value to be true and trigger the audio to play when the variable is true. I tried to make a similar thing but I made an event listener to play the audio when the page loads I make a fake click on the screen that way the audio played seemlesly.

6

So does that mean, if we also embed the video inside a media player and run it over the browser, it will run on opening without the user interaction ? Is it possible by this way ?

Also how was youtube able to achieve this thing where we directly open the webpage by a URL and it autoplays the video ?

7

Consider Youtube and other video sharing platforms each of them doesnt play the video in the HTML directly instead the video is being embedded into a VideoPlayer which is making the audio play.

In your case you are making the HTML to play the audio, let me find the code for running the audio I have it somewhere on my machine :+1:

8

Here you go this was the code I was using to make the music play without user interaction:

window.addEventListener('load', (event) => {
  var audio = new Audio('http://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3');
  audio.play();
})
9

But this will only work when we play it in media Player right? I don’t want to give user to control the media player functionality of play/pause volume etc. But want that to control on my code side. Will this be possible ?

10

Nah if you totally want to make the audio run without user interaction then you have to make it run using a fake click, I wouldn’t prefer that but manthrax is right!

11

Okay, Thankyou for helping :slight_smile:

12

Why do you want to do this? Forcing users to play audio that they can only turn off by turning off their computer’s audio is a terrible idea.

If audio is necessary for whatever you’re coding (eg a game or audio visual experience), inform the user and let them control when it starts playing with a start button.

If it isn’t necessary but you think it’s cool, like background music for a portfolio website, again the user should choose it they want the audio to play or not.

3 Likes
13

Got it. You Got a Point, and i’ve done the changes by showing a popup in starting asking for audio permissions by understanding the POV from a user who will be accessing it .

14

:melting_face:

rip

1 Like