Disable background music from being controlled - Html

naffetS
February 28, 2023
148 views
3 votes
3 Answers

I have an audio HTML element with background music for a game:

<audio class="music" src="..." loop></audio>

Then I have a JS event listener that starts playing it with .play() on user interaction. The problem is, I noticed that on loading the page, I can control the music from the OS/browser’s media controls.

I can control it from Chrome:

And my macOS media controls also show up:

How can I "hide" this from the browser so that it doesn’t show up like this?

Answers

<!-- see i have made a variable name status to check if i paused the audio or some other source paused if . if i paused it then do nothing if it'spaused due to other source then start playing it i have added 1 second interval you can decrease it it's worked perfectely fine 
this method worked perfectly fine with audio tag but I have added onother thing which i found on stack overflow its in 2nd script tag 
Thanks 
 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <script>

    let status = 0 ;
      setInterval(func3,1000)
    function func() {    
       a.play();
       console.log(status)
        status = 1;
        console.log(status)
    }

    function func1() {
        a.pause();
        console.log(status)
        status = 0;
        console.log(status)
    }
    function func3() {
        console.log("i am trying my best")
       if (status == 1){
        if (a.paused){
            a.play();
        }
       }
       if (status ==0 ) {
         if(!a.paused){
            a.pause();
         }
       } 
    }
   console.log(status);
    </script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div title="jha">i am abhishek jha </div>
    
    <button type="button" onclick="func()" >play</button>
    <button type="button" onclick="func1()" >pause</button>
    <audio class="music" src="badliar.mp" loop preload="auto">abhi</audio>

    <script>
        
    navigator.mediaSession.metadata = new MediaMetadata({});
    const a = new Audio("./badliar.mp3");
    </script>

</body>
</html>

 instruction = "this one is best this one work as you want try it "

documentatio = "http://wavesurfer-js.org/docs/"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="waveform"></div>
<script src="https://unpkg.com/wavesurfer.js"></script>
<script>
    var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
});
wavesurfer.load('./badliar.mp3');
wavesurfer.on('ready', function () {
    wavesurfer.play();
});
</script>
</body>
</html>

You can use AudioContext and load an audio track using decodeAudioData() to play it.

Here is a sample implementation:

let audioCtx = null;

async function init_sound() {
  const soundfile = "https://upload.wikimedia.org/wikipedia/commons/transcoded/5/56/Piano_Sonata_N%C2%B0_1_-_1._Allegro_%28Beethoven%2C_Schnabel%29.ogg/Piano_Sonata_N%C2%B0_1_-_1._Allegro_%28Beethoven%2C_Schnabel%29.ogg.mp3";

  audioCtx = new AudioContext();
  const resp = await fetch(soundfile);
  const buf = await resp.arrayBuffer();
  const audio = await audioCtx.decodeAudioData(buf);
  const source = audioCtx.createBufferSource();
  source.buffer = audio;
  source.connect(audioCtx.destination);
  source.start();
}

function play() {
  if (!audioCtx) {
    init_sound();
    return;
  };
  audioCtx.resume();
}

function pause() {
  audioCtx.suspend();
}

<input type="button" id="play" value="Play" onclick="play()">
<input type="button" id="pause" value="Pause" onclick="pause()">

Please signup or login to give your own answer.

Click here to cancel reply.

Disable background music from being controlled – Html

Answers