I'm trying to make an audio player with html and javascript. Every time someone clicks play, it plays the audio files that are selected in the check boxes: https://gyazo.com/9c93954e89dcd975ed47956b8563b177
HTML Audio
<audio id="player">
</audio>
HTML checkboxes
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0"><a href="#!" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo" class="">Collapsible
Test1</a></h5>
</div>
<div id="collapseTwo" class="card-body collapse show" aria-labelledby="headingTwo" data-parent="#accordionexample" style="">
<div class="title-choice">
<input type="checkbox" class="form-check-input" name="1.mp3" id="playable_file">
<label for="">1.mp3</label>
</div>
<div class="title-choice">
<input type="checkbox" class="form-check-input" name="2.mp3" id="playable_file">
<label for="">2.mp3</label>
</div>
</div>
</div>
play_files.js
var i;
var ii;
var checked;
function save_files() {
i = 0;
ii = 0;
checked = [];
$("input[id='playable_file']:checked").each(function ()
{
checked.push($(this).attr("name"));
});
addNumber ();
play_files ();
setInterval(function() {check(); }, 3000);
}
function addNumber () {
if(i != 0) {
document.getElementById("audio" + i - 1).remove();
}
var container = document.createElement('source');
container.src = "./audiofiles/" + checked[i];
container.id = "audio" + i;
container.type = "audio/mpeg";
$('#player').append(container);
i++
}
function check () {
if(ii != 0) {
document.getElementById("player").onended = function(){
play_files();
};
}
}
function play_files() {
document.getElementById("player").play();
}
The thing is on chrome, but the sound doesn't work at all. On Firefox, it plays the first selected audio file, but then just full on errors.
error: Uncaught TypeError: document.getElementById(...).ended is not a function.
and
warning: Cannot play media. No decoders for requested formats: audio / mpeg.
So to sum it up -> I get errors on the second file. I can't play the sounds in chrome, And I don't really know how to start the next file after a certain time after the first audio file stops.
Thanks!
question from:
https://stackoverflow.com/questions/65946101/javascript-audio-html 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…