How can I control background music with button?

Question

I have tried two version

The first one autoplay is working on Google Chrome but how can I control with button that I can play or pause the audio?

 <embed name="pop" src="pop.mp3" loop="true" hidden="true" autostart="true">

The second one autoplay is not working on Google Chrome but I can control it with button in IE or FireFox

<audio id="myAudio">
<source src="pop.mp3" type="audio/mp3">
</audio>

The buttons

<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>

And the Javascript

var aud = document.getElementById("myAudio"); 

function playAud() { 
aud.play(); } 

function pauseAud() { 
aud.pause(); }

So how can I deal with this problem?

I want the Audio autoplay in background
And then I can use button to play or pause it

@Mohammad I want to autoplay the audio and then i control it with button — TheRyuuSei, Nov 28 '18 at 14:05
Since GC61, it's been an end-user option: chrome://flags/#autoplay-policy https://developers.google.com/web/updates/2017/09/autoplay-policy-changes — freedomn-m, Nov 28 '18 at 14:09
Possible duplicate of [Audio autoplay not working in chrome](https://stackoverflow.com/questions/50490304/audio-autoplay-not-working-in-chrome) — freedomn-m, Nov 28 '18 at 14:09
@freedomn-m I have tried this one , it is not suitable for me — TheRyuuSei, Nov 28 '18 at 14:15

score 0 · Answer 1 · answered Nov 28 '18 at 13:58

0

Try this:

<audio id="sound" src="sound.mp3" autoplay="0" autostart="0"></audio>
<button onclick="playAud()" type="button">Play</button>
<button onclick="pauseAud()" type="button">Pause</button>

<script>
    let aud = document.getElementById("sound");

    function playAud() { 
        aud.play(); 
    } 

    function pauseAud() { 
        aud.pause(); 
    }

answered Nov 28 '18 at 13:58

Jaden Baptista

656
5
16

I made it so it doesn't autoplay, it's only supposed to play when you click the button. – Jaden Baptista Nov 28 '18 at 14:09
I tried.It is not I want. But thank you for your help – TheRyuuSei Nov 28 '18 at 14:18

jsadev.net · Accepted Answer · 2018-11-28T15:39:32.300

You only have to trigger the play function on init:

var aud = document.getElementById("myAudio");

function play() {
  aud.play();
}

function pause() {
  aud.pause();
}

aud.play(); // this will do the trick :)

<audio id="myAudio">
<source src="https://wiki.selfhtml.org/local/Europahymne.mp3" type="audio/mp3">
</audio>
<button onclick="play()" type="button">Play</button>
<button onclick="pause()" type="button">Pause</button>

Old solution:

You could remove/add your embed-element like i did here. This might be hacky, but it could be a solution for you.

var audiowrapper = document.getElementById('audio-wrapper');
var audio = document.getElementById('audio');

function play() {
  if (!audiowrapper.hasChildNodes()) audiowrapper.appendChild(audio);
}

function pause() {
  if (audiowrapper.hasChildNodes()) {
    while (audiowrapper.firstChild) {
      audiowrapper.removeChild(audiowrapper.firstChild);
    }
  }
}

#audio-wrapper {
  position: absolute;
  top: -300px !important;
}

<div id="audio-wrapper">
  <embed id="audio" name="pop" src="https://wiki.selfhtml.org/local/Europahymne.mp3" loop="true" hidden="true" autostart="true">
</div>
<button onclick="play();" type="button">Play</button>
<button onclick="pause();" type="button">Pause</button>

you could hide the "audio-wrapper" using "display: none;". I've edited my answer. Please take a look at it. — jsadev.net, Nov 28 '18 at 14:41
or take a look at the new solution in my answer. it might be the better one. :) — jsadev.net, Nov 28 '18 at 15:40

How can I control background music with button?

2 Answers2