如果加载了某些图像，则播放声音[关闭]

Posted 2023-02-25

【中文标题】如果加载了某些图像，则播放声音[关闭]

【英文标题】：play sound if certain image is loaded [closed]

【发布时间】：2012-12-20 14:34:43

【问题描述】：

我有一个声音文件，我希望只有在加载我页面上的某个图像时才能听到他的声音。

我该如何管理？

我需要在准备好的文档中添加什么？

【问题讨论】：

@Jack 为什么？ jQuery + html5 = 成功的组合。让我们从 web dev 开始使用 flash

真的吗？有了所有 html5 的优点，Adobe 放弃了对移动设备的支持？

见Play Sound javascript/Jquery和Jquery check if image is loaded。

jQuery callback on image load (even when the image is cached) 的可能副本

@roXon：除了 jQuery+HTML5 还没有接近 flash 的功能。它很慢（dom 操作等），有问题，几乎不可能让任何非常复杂的东西在每个浏览器中运行相同的东西，基本工具只是用于制作实际应用程序，标准到目前为止关闭（从被标准化和采用）如果某些东西甚至可以工作，那是一个废话，但单独工作是正确的。是的，flash 已经死了。它可能正在消亡，但在 HTML5 中还有很多你不能做好的事情，这在 Flash 中是微不足道的......不是说不喜欢 JS，而是对 FUD 嘘......

【参考方案1】：

包括ImagesLoaded() 插件。

HTML

<audio id="my_sound">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">

  Your browser does not support this audio format.
</audio>

jQuery

var audio = document.getElementById('my_sound');

$('img#my_image').imagesLoaded(function(e) 
    audio.play();
);

【讨论】：

根据这里的回答，这不是一个好的解决方案：***.com/questions/910727/…。如果图像是从缓存中加载的，则事件可能不会启动。

根据您的 cmets，我将 load() 事件更改为 imagesLoaded()，这是一个 jQuery 插件，用于在加载图像时创建事件处理程序。

我应该在这里放什么：img#my_image，我的图像名称是 greenbell.png，所以 :img#greenbell.png - 我应该放什么 img#

添加到您的 '' ID 属性命名为-my_image

@jimmywho <img src="greenbell.png" id="my_image" alt="" />

【参考方案2】：

jsBin demo

HTML：

<img class="alertSound" src="img.jpg" /> 


<audio id="imgLoadedSound" src="loaded.ogg">
  Your browser does not support the <code>audio</code> element.
</audio>

JS：

$('img.alertSound').load(function()
     $('#imgLoadedSound').get(0).play();
);

或者更好： JsBin demo

$(function() 

    function imgIsLoaded() 

      var audio = new Audio('loaded.ogg');
      var img = new Image().src = this;
      img.onload = function()
        audio.play();
      ;

    

    $('img.alertSound').each(function() 
        if( this.complete ) 
            imgIsLoaded.call( this );
         else 
            $(this).one('load', imgIsLoaded);
        
    );


);

【讨论】：

它正在工作，谢谢，我的问题是我指向这个声音的图像只加载在点击页面中的某些内容后发现的 div 上，此时此代码不是工作

@jimmywho 在什么时候？

图片在页面上显示的时间点，图片仅在我打开某个div时显示，而不是'on load'时显示

我回答了你的问题。其他问题请写一个新的