0

我尝试了两种不同的方法来切换播放器上的播放/暂停按钮，但出于某种原因，这两种方法都不适用于第一次点击。

这个，据说检查音频的状态，看看它是暂停还是结束：

function togglePlayPause() { 
var audioPlayer = document.getElementsByTagName('audio')[0];
var playpause = document.getElementById("playpause"); 
if (audioPlayer.paused || audioPlayer.ended) { 
     playpause.title = "pause"; 
     playpause.innerHTML = "pause"; 
} 
else { 
         playpause.title = "play"; 
     playpause.innerHTML = "play"; 
     } 
}

或者我试过这个，它只是通过 onClick 切换toggle(this)：

 function toggle(obj) {
    if (obj.className== 'playButton') {
        obj.className = 'pauseButton';
        obj.title = "PAUSE"; 
        obj.innerHTML = "PAUSE";
    } else {
        obj.className = 'playButton';
        obj.title = "PLAY"; 
        obj.innerHTML = "PLAY";
        }
    }

第一次单击按钮时都不会切换，尽管第一种方法确实从默认的内部“播放”更改为“播放”，所以我猜这是：

<a href="#" id="start" onclick="playPause();togglePlayPause();"><div title="play" class="playButton" id="playpause">PLAY</div></a>

在这两种方法中，后续点击都可以正常工作。知道为什么会这样吗？它可能与调用 audioPlayer 变量的方式有关吗？数组从 0 开始。（我抓着稻草。）

像往常一样非常感谢！

4

1 回答 1

-1

I would go without creating functions, I would check if the link is clicked then proceed to the events that would be fired.

so something like $("#start").click(function(){}); in can be tried.

First, have the jQuery library included in your HTML header.

Then create a new javascript file, included it as well (usually this is put after the jQuery included)

In your new javascript file write the following

$(document).ready(function() {
   $("#start, #stop, #play, #pause").click(function() { //you can have more or less selectors (selectors are the ones with #)
       //Your code goes here
   });
});

Here is a fiddle for that solution. http://jsfiddle.net/JRRm2/1/ (tidier text: http://jsfiddle.net/JRRm2/2/)

于 2012-06-08T15:32:41.607 回答