如何通过 body onload 事件同时操作 HTML 音频标签和 JavaScript 函数？答案

【问题标题】：How to operate both HTML audio tag and a JavaScript function with body onload event?如何通过 body onload 事件同时操作 HTML 音频标签和 JavaScript 函数？
【发布时间】：2020-09-24 16:32:44
【问题描述】：

我在下面有一个 JavaScript 代码（用于幻灯片）和一个 HTML 音频标签。我希望我的页面在播放幻灯片和音频文件之前加载其自身的每个组件。

使用 window.onload 来满足我运行幻灯片的需要没有问题。但我不知道如何使用我的 HTML 标记。

我想我应该在 body 标记中编写我的 JavaScript 并使用：body onload="..."，但我不知道怎么做！

这是我的 JavaScript 代码：

<script type="text/javascript">

window.onload = a;

function a() {

        $(document).ready(function(){
        $('#slideshow').cycle({
            
x:'curtainX', 
sync:  false,
speed:900,
timeout:10, 
delay: 1500,
});
});

setTimeout(plus1,9000);
function plus1() { 

        $(document).ready(function(){
        $('#slideshow').cycle('pause');
});
}

}

</script>

这是我的音频标签：

<audio autoplay loop>
  <source src="kooche.mp3">

【问题讨论】：

然后使用javascript而不是使用自动播放来播放您的音频

标签： javascript html

【解决方案1】：

听起来您可以在页面加载后播放幻灯片，但您不确定如何设置页面加载后播放的音频。对吗？

如果是这样，您可以在脚本中动态创建 audio element，而不是在标记中包含 HTML 音频元素。

例如：

$(document).ready(function(){
    $('#slideshow').cycle('pause');
    // Create the audio element
    var music = new Audio("kooche.mp3");
    music.play();
});

我还建议检查客户端浏览器是否支持 HTML5 音频播放。

var audioEl = document.createElement('audio');
// Check this before you try playing your audio
var canPlayAudio = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));

Source

【讨论】：

非常感谢。我检查它。有用。但我有另一个问题我敢肯定，当幻灯片未激活或未加载时，您对幻灯片很熟悉，图像将显示，因为它们在 body 标签中，我怎样才能控制它们，以彻底解决问题？再次感谢您以前的帮助
我不确定我是否完全遵循。那么幻灯片的图像是在页面加载完成之前显示的吗？我认为您可能需要使用 .load() 而不是 .ready() 因为 .ready() 会在 DOM 准备好后立即触发，但资产（图像、声音文件）可能还没有准备好。看看这篇文章：stackoverflow.com/questions/5424055/check-if-images-are-loaded

【解决方案2】：

如果 jQuery 是一个选项，你可以使用

$(document).ready(function(){
   //my slideshow code
});

或者如果它不是一个选项，你可以创建你自己的伪类 jQuery 就绪监听器

function onReady (callback){
    var addListener = document.addEventListener || document.attachEvent,
        removeListener =  document.removeEventListener || document.detachEvent
        eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"

    addListener.call(document, eventName, function(){
        removeListener( eventName, arguments.callee, false )
        callback()
    }, false )
}

或者，将有问题的幻灯片代码放在 DOM 的最底部。它自然会最后执行。

【讨论】：

【解决方案3】：

这就是你所追求的吗？它使用.trigger 在加载时播放歌曲，并且没有臃肿的标记。 http://jsfiddle.net/2xH29/

【讨论】：

谢谢，这正是我需要的。从 html 中控制音频标签