how to insert audio in a webpage and hide the control in html

Question

how can I insert local audio without displaying any control(if we can show only volume button then better) which loops itself continuously...? I tried embed tag, iframe tag, audio tag but no one is perfect some works on edge but not on chrome...

Possible duplicate of [How do you hide HTML5 Audio controls?](https://stackoverflow.com/questions/5697724/how-do-you-hide-html5-audio-controls) — wokoro douye samuel, Mar 10 '19 at 19:12

score 0 · Answer 1 · answered Mar 10 '19 at 18:35

0

Try hiding it using CSS by setting the 'display' to 'none'.

audio { 
   display:none;
}

answered Mar 10 '19 at 18:35

milktae

31
1
3

score 0 · Answer 2 · answered Mar 11 '19 at 10:26

You can use Web Audio API to play a sound without visible control in the html page.
There is loop option you can activate to play in a loop.

const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
let source = audioCtx.createBufferSource();

fetch('sample.wav')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    audioCtx.decodeAudioData(buffer, data => {
      source.buffer = data;
      source.connect(audioCtx.destination);
      source.loop = true;
      source.start(0);
    })
  })

If you need, you can add a volume control with the help of a gainNode and a range slider for example.

Note some browser implementations prevent playing audio until user explicitly allows it.

how to insert audio in a webpage and hide the control in html

2 Answers2