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

Question

        <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>

好吧，我在场景中使用了一些不同的方法。

将按钮放在 div 中。

Answer 1

<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 中。

根据问题，这不是正确的答案，但它是 "correct" 我试图完成的答案。

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

toggling a button with another while keeping its onclick event

html

javascript

html5-audio