I'm a total beginner and I try to use this to make an audio player
<audio id="music" controls>
<source src="sample.mp3" type="audio/mp3">
</audio>
but on mobile websites only a play button is showed (I can't insert a picture but on desktop we will see a normal player which consists of slider).
So how can I make the player appear on mobile just like its appearance on desktop?
It won't work. In plain HTML Simulated user interactions doesn't work in mobile.
Add a little javascript
window.addEventListener('load', function () {
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source = audioCtx.createBufferSource();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'audio-autoplay.wav');
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function (r) {
audioCtx.decodeAudioData(
xhr.response,
function (buffer) {
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = false;
});
source.start(0);
});
xhr.send();
});