Question

您好我正在尝试为我正在创建的小型Web应用程序创建播放和暂停按钮。我已经制作了一个播放的按钮和另一个暂停的按钮，但是现在我需要一个按钮，点击时会运行播放功能，点击后返回暂停按钮。

var audio = new Audio("audio.mp3");

$(".play").click(function () {
    audio.play();
})

$(".pause").click(function () {
    audio.pause();
    $(this).toggleClass(".play");
});

这是按钮

<div class="play"><img src="../images/play.gif"></img></div>

<div class="pause"><img src="../images/pause.gif"></img></div>

我知道每次点击时都可以轻松地制作div更改类。

Answer 1

我会像这样设置<html>：

<div id="play"><img src="../images/play.gif"></img></div>
<!-- initially a play button -->

然后我会使用布尔值在脚本中来回切换。

var toggleIt = false;
$("#play").click(function(){
    if (!toggleIt){
        audio.play();
        toggleIt = true;
        $("#play").find("img").attr("src", "file url here");
    }
    else{
        audio.pause();
        toggleIt = false;
        $("#play").find("img").attr("src", "file url here");
    }
})

修改：这是使用精彩fiddle的place holder kittens。是的，你应该感谢我对占位符图片的精致品味。

Answer 2

设置变量然后使用条件来查看是否要播放或暂停音频：

<div class="button"><img src="../images/play.gif"></img></div>

var play = true;
$(".button").click(function(){
    if (play){
        // Play
        audio.play();
        $(".button img").attr("src", "../images/pause.gif");
        play = false;
    } else {
        // Pause
        audio.pause();
        $(".button img").attr("src", "../images/play.gif");
        play = true;
    }
});

Example

Answer 3

您可以创建2个不同的按钮并更改可见性

var audio = new Audio("audio.mp3");

$("#play").click(function () {
audio.play();
 $("#play").hide();
 $("#pause").show();

})

 $("#pause").click(function () {
 $("#pause").hide();
 $("#play").show();
   });

Answer 4

var audio = new Audio("audio.mp3");

$(".play").click(function () {
    $(this).hide();
    $(".pause").show();
    audio.play();
})

$(".pause").click(function () {
    audio.pause();
    $(this).hide();
    $(".play").show();
    $(this).toggleClass(".play");
});

这是最简单的方法。使用css psuedo类可能会更好，但如果你足够关心，我会把这种乐趣留给你

Answer 5

var audio = new Audio("audio.mp3");

$(".play").click(function () {
    $(this).hide();
    $(".pause").show();
    audio.play();
})

$(".pause").click(function () {
    audio.pause();
    $(this).hide();
    $(".play").show();
    $(this).toggleClass(".play");
});

如何创建运行两个函数的html按钮？

5 个答案: