Question

所以我有2个图标，它们都旨在播放不同的音频。但是目前他们都在播放相同的文件。有什么想法吗？

html

 <a onClick="togglePlay()">
     <audio id="sAudio" src="Audio/IngridAlcalde_Castellano_VideoExplicativo.mp3" preload="auto"></audio>
     <i class="far fa-pause-circle" id="spanish-pause"></i>
     <i class="far fa-play-circle" id="spanish-play"></i></i>
 </a>

 <a onClick="togglePlay()">
     <audio id="eAudio" src="Audio/IngridAlcalde_English_Explainer.mp3" auto"></audio>
     <i class="far fa-pause-circle" id="english-pause"></i>
     <i class="far fa-play-circle" id="english-play"></i></i>
 </a>

css

#spanish-play {
    font-size: 400%;
    color: #ED6375;
    position: absolute;
    margin-top: 50px;
    margin-left: 10%;
    transition: 0.5s;
    display: block;
    width: 6%;
    text-align: center;
    background-color: pink;
}

#spanish-play:hover {
    color: rgb(236, 130, 139);
    text-shadow: 1px 1px 1px rgb(107, 39, 39);


}

#spanish-pause {
    font-size: 400%;
    color: rgb(218, 113, 127);
    position: absolute;
    margin-top: 50px;
    margin-left: 10%;
    transition: 1s;
    display: none;
    background-color: blue;

}

#english-play {
    font-size: 400%;
    color: blue;
    position: absolute;
    margin-top: 50px;
    margin-left: 30%;
    transition: 0.5s;
    display: block;
    width: 6%;
    text-align: center;
}

#english-play:hover {
    color: rgb(93, 71, 187);
    text-shadow: 1px 1px 1px rgb(107, 39, 39);


}

#english-pause {
    font-size: 400%;
    color: rgb(94, 58, 194);
    position: absolute;
    margin-top: 50px;
    margin-left: 30%;
    transition: 1s;
    display: none;

}

最后是Javascript

var sAudio = document.getElementById("sAudio");
var isPlaying = false;

function togglePlay() {
  if (isPlaying) {
    sAudio.pause()
  } else {
    sAudio.play();
  }
};
sAudio.onplaying = function() {
  isPlaying = true;
};
sAudio.onpause = function() {
  isPlaying = false;
};


// toggle play pause button spanish

var playBtn = document.querySelector("#spanish-play");
var pauseBtn = document.querySelector("#spanish-pause")


playBtn.addEventListener("click", function() {
    playBtn.style.display = "none";
    pauseBtn.style.display = "block";
})

pauseBtn.addEventListener("click", function () {
    pauseBtn.style.display = "none";
    playBtn.style.display = "block";
})

var audS = document.getElementById("sAudio");
audS.onended = function () {
    pauseBtn.style.display = "none";
    playBtn.style.display = "block";
};

// toggle play buttons english

var eAudio = document.getElementById("eAudio");
var isPlaying = false;

function togglePlay() {
    if (isPlaying) {
        eAudio.pause()
    } else {
        eAudio.play();
    }
};
eAudio.onplaying = function () {
    isPlaying = true;
};
eAudio.onpause = function () {
    isPlaying = false;
};


// toggle play pause button english

var playBtnE = document.querySelector("#english-play");
var pauseBtnE = document.querySelector("#english-pause")


playBtnE.addEventListener("click", function () {
    playBtnE.style.display = "none";
    pauseBtnE.style.display = "block";
})

pauseBtnE.addEventListener("click", function () {
    pauseBtnE.style.display = "none";
    playBtnE.style.display = "block";
})

var audE = document.getElementById("eAudio");
audE.onended = function () {
    pauseBtnE.style.display = "none";
    playBtnE.style.display = "block";
};

我知道我在这里的javascript中也有很多重复的代码。因此，作为第二个问题，我该如何重构它而不重复太多代码。

所有这一切还很新，不胜感激任何建议！

谢谢。

Answer 1

首先，尝试清洁html。我认为您在第二个preload="标记中错过了一个<audio>。您还关闭了每个<i>标签两次。

此外，在您的JavaScript中，您有两个具有相同名称function togglePlay()的函数。尝试为每个名称使用不同的名称。希望这会有所帮助。

Answer 2

我相信您的HTML会感到困惑。

看看如何正确使用the audio-tag

您还有<script src="/jquery.min.js" type="text/javascript"></script> <script src="/sputility.js" type="text/javascript"></script> <script type="text/javascript"> alert('attempt hide ...'); $(document).ready(function () { SPUtility.HideSPField('Information'); }); alert('attempt hide done ...'); </script>的两倍。请严格使用HTML。我已经将</i>移出了锚点。您应该直接将动作分配给他们，而不是全部分配给他们。

还可以使用相同的功能开始音乐。给这些函数一个索引并像这样对它们进行区分，以防止出现这种情况。

<i>

Answer 3

清理HTML部分。还有额外的关闭标签。

为什么两个图标都播放相同的音频？

3 个答案: