Question

我想要一个小图像，当点击时播放声音并更改为不同的图像。再次单击该按钮时，它将更改回上一个图像并停止声音。

您可以将其视为一个“开始”的按钮。当单击“开始”时，它会循环播放声音并更改为“停止”，当单击“停止”时，它会返回开始，声音停止播放。

我尝试使用此代码，它可以很好地处理图像，但我似乎无法为2张图像播放不同的声音。

Javascript Sound Start/Stop and Image Change

我还发现了使用此脚本播放和停止声音的单独代码：

<script>
     $(document).ready(function() {
    var playing = false;

    $('a#button').click(function() {
        $(this).toggleClass("down");

        if (playing == false) {
            document.getElementById('player').play();
            playing = true;
            $(this).text("stop sound");

        } else {
            document.getElementById('player').pause();
            playing = false;
            $(this).text("restart sound");
        }


    });
});
  </script>

<div>
<a id="button">play sound</a> 
                <audio id="player" src="mysound.mp3" preload="auto"></audio>

哪个也有效...

我可以将2组合在一起吗？或者我没有正确使用第一个javascript代码？

非常感谢任何帮助。

Answer 1

如果您想播放声音并更改图像，反之亦然，以下情况可以正常使用：

<强> HTML

import tkinter as tk

class Example(tk.Frame):
  def __init__(self, parent):
    tk.Frame.__init__(self, parent)
    self.text = tk.Text(self, wrap="none")
    self.text.pack(fill="both", expand=True)
    self.start = tk.StringVar()
    self.end = tk.StringVar()

    self.text.bind("<Button-1>", self.button_down)
    self.text.bind("<ButtonRelease-1>", self.button_up)
    #self.text.bind("<B1-Motion>", self._on_click)
    self.text.tag_configure("highlight", background="green", foreground="black")

    with open(__file__, "rU") as f:
      data = f.read()
      self.text.insert("1.0", data)

  def button_down(self, event):
    self.start.set(self.text.index('@%s,%s' % (event.x, event.y)))
    print(self.start.get())

  def button_up(self, event):
    self.end.set(self.text.index('@%s,%s' % (event.x, event.y)))
    print(self.end.get())

if __name__ == "__main__":
  root = tk.Tk()
  Example(root).pack(fill="both", expand=True)
  root.mainloop()

<强> JS

<p>
   <a href="#" id="button"> <i class="fa fa-play fa-lg" aria-hidden="true"></i></a>
</p>
<audio id="player" src="http://soundbible.com/mp3/kids-record-player-daniel_simon.mp3" preload="auto"></audio>

这个想法基本上是这样的：如果声音在播放，那么交换类。此示例可以扩展为切换隐藏和显示图像。

请参阅this工作示例。

希望它有所帮助。

修改

f我想在同一网页上将其用于多个图像。我只是添加更多添加＆amp;删除课程？或者我是否为每张图片制作新功能？

实际上，您可以将该功能用于任意数量的图像。我们只需要概括一些事情，我们就可以了。

我做的第一件事是更改click事件的jQuery选择器。之前我们专门搜索了具有唯一ID var playing = false; $('#button').click(function() { if (playing == false) { document.getElementById('player').play(); playing = true; $(this).find('i').removeClass('fa-play'); $(this).find('i').addClass('fa-pause'); } else { document.getElementById('player').pause(); playing = false; $(this).find('i').removeClass('fa-pause'); $(this).find('i').addClass('fa-play'); } });的元素。为了绑定到多个按钮，我给它们命名为#button。

变量$('[name=button]')帮助我们跟踪用户是否播放了按钮。为了控制是否单击了按钮，我不得不将变量playing作为属性移动到playing元素。这样每个音频元素都会知道＆＃34;它的当前状态（播放或暂停）;

<强> HTML

audio

注意数据播放=＆＃34; false＆＃34;属性

<强> JS

<audio name="player" src="http://soundbible.com/mp3/kids-record-player-daniel_simon.mp3" preload="auto" data-playing="false"></audio>

这里的技巧是更新播放属性以确保我们知道用户点击了播放或暂停

请参阅上一个示例的this更新版本。

Javascript声音开始/停止和图像更改Part2

1 个答案: