代码之家 › 专栏 › 技术社区 › Ushida

在保持其onclick事件的同时切换另一个按钮

html5-audio html javascript

-3

Ushida · 技术社区 · 8 年前

        <audio id='audio-player' controls='controls'>
            <source src='sound.wav' type='audio/wav'>
            Your browser does not support the audio element,
        </audio>

        <button id='play' onclick="document.getElementById('audio-player').play(); document.getElementById('play').style.display='none'; document.getElementById('pause').style.display='block';">Play</button>
        <button id='pause' style='display: none' onclick="document.getElementById('audio-player').pause(); document.getElementsById('pause').style.display='none'; document.getElementsById('play').style.display='block';">Pause</button>
        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>

        <br>

预期的反应应该是,单击播放会取消播放,并显示暂停,反之亦然(除此之外,按钮本身也会按预期操作)

<script>
            function playPause() {
                        if (document.getElementById('play')) {
                            if (document.getElementById('play').style.display == 'none') {
                                document.getElementById('play').style.display = 'block';
                                document.getElementById('pause').style.display = 'none';
                            }
                            else {
                                document.getElementById('play').style.display = 'none';
                                document.getElementById('pause').style.display = 'block';
                            }
                        }
            }
        </script>

        <audio id='audio-player' controls='controls'>
            <source src='sound.wav' type='audio/wav'>
            Your browser does not support the audio element,
        </audio>

        <div id="play"><button onclick="document.getElementById('audio-player').play(); playPause();">Play</button></div>
        <div id="pause" style='display: none'><button onclick="document.getElementById('audio-player').pause(); playPause();">Pause</button></div>

        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>

        <br>

我用了一种不同的方法来处理这个场景。

1 回复 | 直到 8 年前

Ushida 8 年前

<script>
            function playPause() {
                        if (document.getElementById('play')) {
                            if (document.getElementById('play').style.display == 'none') {
                                document.getElementById('play').style.display = 'block';
                                document.getElementById('pause').style.display = 'none';
                            }
                            else {
                                document.getElementById('play').style.display = 'none';
                                document.getElementById('pause').style.display = 'block';
                            }
                        }
            }
        </script>

        <audio id='audio-player' controls='controls'>
            <source src='sound.wav' type='audio/wav'>
            Your browser does not support the audio element,
        </audio>

        <div id="play"><button onclick="document.getElementById('audio-player').play(); playPause();">Play</button></div>
        <div id="pause" style='display: none'><button onclick="document.getElementById('audio-player').pause(); playPause();">Pause</button></div>

        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime -= 10;">Rewind</button>
        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime = 0;">Stop</button>
        <button onclick="document.getElementById('audio-player').pause(); document.getElementById('audio-player').currentTime += 10;">Forward</button>

        <br>

我用了一种不同的方法来处理这个场景。

将按钮放在div中。

根据这个问题,这不是一个正确的答案,但对于我试图实现的目标来说,这是一个“正确”的答案。