通过单击图像切换音频“开始/停止”

Posted 2023-02-25

【中文标题】通过单击图像切换音频“开始/停止”

【英文标题】：Toggle audio "start/stop" with click of image

【发布时间】：2017-04-13 19:24:37

【问题描述】：

有人可以帮我为这个字符串添加一些简单的功能吗？

这是我用来让人们单击图像并播放音频文件的方法...这首歌一直播放到结束并且不会停止。我想允许人们再次单击它来停止歌曲，并将其重置为开头：

$(document).ready(function()

    var element = $('#starspangledbanner');

    var audio = new 
    Audio('http://siteassets.starspangledbanner.mp3');

element.click(function(e)

    e.preventDefault();
    audio.play();
);

); 

提前致谢。

【问题讨论】：

How to toggle audio play() pause() with one button or link?的可能重复

【参考方案1】：

您可以按照此代码进行操作。这很容易，而且炒起来很好：

$(document).ready(function()

    var element = $('#starspangledbanner'),
    audio = new Audio('http://siteassets.starspangledbanner.mp3');

  element.click(function(e)

    e.preventDefault();
    
    if(audio.paused)
      audio.play();
    else
      audio.pause();
      audio.currentTime = 0;
    
  );
);

【讨论】：

hmm - 似乎对我不起作用......我完全复制了代码。我所做的唯一更改是实际的 mp3 文件位置...

是的，我也使用另一个本地 mp3 文件链接。但是，它在我的浏览器中运行良好。您的程序中可能还有另一个错误。你能给我你的完整代码，包括所有的 html 和 javascript 吗？然后，我就可以正常调试了。

您好，非常感谢您的帮助。我对此很陌生...我使用 PageCloud 制作网站，编码不是我的事，我更像是一名图形设计师。所以，我不太确定如何获取 HTML 代码……但是，这里是该页面所在的网站。 www.americanflagmusic.com

您好，抱歉 - 我已将其改回原版。我只是将其更改为您的代码...您可以再看一下吗。非常感谢。

哇，非常感谢！我想在未来与您联系并提出此类问题 - 最好的方法是什么以及如何补偿？