Question

我想通过两种方式控制一个音频文件的开始和暂停：

带有“ control”选项的常规控件
位于小图标左上方的javascript，该小图标浮动在屏幕。

因此，如果有人通过图像或控件启动mp3，则它应该播放，并且应该通过单击左上角的图标或常规播放器来暂停它。

但是它不起作用。目前，我要做的只是两个播放器，可以播放相同的mp3，但是单击一个不会影响另一个播放器的播放...

到目前为止我的代码

//<![CDATA[
    window.onload=function() {
      
  document.getElementById("playAudio").addEventListener("click", function() {
            var audio=document.getElementById('testAudio');
            if(this.className=='is-playing') {
                this.className="";
                this.innerHTML="<i class='float'><img class='bildpur-s pur' src='https://www.liesenfeld.de/WP/images/play-small.gif'></i>";
                audio.pause();
                
            }
            else {
                this.className="is-playing";
                this.innerHTML="<i class='float'><img class='bildpur-s pur' src='https://www.liesenfeld.de/WP/images/pause-small.gif'></i>";
                audio.play();
            }
        }
        );
    } //]]>

.float {
        position: fixed;
        width: 50px;
        height: 50px;
        top: -8px;
        left: 0px;
        background-color: rgba(182, 149, 105, 0.8);
        color: #FFF;
        border-radius: 50px;
        text-align: center;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
        z-index: 41000;
        color: #fff4e3;
        line-height: 0.8;
        font-weight: bold;
    }

    .pur {
        box-shadow: 0 0 0;
    }

<p><audio id="testAudio" src="https://www.liesenfeld.de/medis/beitrag-erotikmassage.mp3" hidden=""></audio><a id="playAudio" href="#"><i class="float" title="Klicke hier um den Text zu hören"><img class="bildpur-s pur" src="https://www.liesenfeld.de/WP/images/play-small.gif"></i></a></p>
<br><br>
Both the triangle on the top<br>
AND the player below should control the same playback<br>
ATM hitting both triangles will start TWO seperate playbacks.
<p><audio id="testAudio" src="https://www.liesenfeld.de/medis/beitrag-erotikmassage.mp3" controls></audio><a id="playAudio" href="#"><i title="Klicke hier um den Text zu hören"></i></a></p>

通过两个链接控制一个音频文件

0 个答案: