Я хочу разместить фоновую музыку на веб-сайте и приостановить / воспроизвести музыку с помощью пользовательской кнопки.Сначала я использовал <audio>
, но Chrome не позволяет ему играть автоматически.Так что теперь я объединяю <audio>
и <iframe>
для создания автозапуска музыки.Но я не знаю, как приостановить / воспроизвести музыку на <iframe>
.Вот мой код.
<script>
var musicIframe = document.getElementById("iframeAudio");
var musicAudio = document.getElementById("audioAudio");
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (!isChrome) {
$('#iframeAudio').remove();
$("#music__btn--id").click(function() {
if (musicAudio.paused) {
musicAudio.play();
$("#music__btn--id").removeClass("music__pause").addClass("play"); // change to the play button
} else {
musicAudio.pause();
$("#music__btn--id").removeClass("play").addClass("music__pause"); // change to the pause button
}
});
} else {
$('#audioAudio').remove();
$("#music__btn--id").click(function() {
if (musicIframe.paused) {
$("#iframeAudio").attr("src", "./images/music.mp3");
$("#music__btn--id").removeClass("music__pause").addClass("play"); // change to the play button
} else {
$("#iframeAudio").removeAttr("src");
$("#music__btn--id").removeClass("play").addClass("music__pause"); // change to the pause button
}
});
}
</script>
<div class="music">
<a class="music__btn" id="music__btn--id"></a>
<iframe id="iframeAudio" src="./images/music.mp3" allow="autoplay" style="display:none"></iframe>
<audio id="audioAudio" src="./images/music.mp3" autoplay="autoplay" loop="loop"></audio>
</div>
И когда я открываю страницу с помощью IE, появляется маленькое окно проигрывателя. Как я могу его отключить?