gpt4 book ai didi

javascript - 在鼠标单击事件上停止音轨

转载 作者:行者123 更新时间:2023-12-03 00:43:06 25 4
gpt4 key购买 nike

我正在学习一些初学者前端开发。我创建了一个非常简单的网站,它使用 Lightbox 套件。我已经弄清楚了如何在有人单击缩略图时启动音轨,但需要一些关于如何停止它的指示,或者为了获得更强大的解决方案,如果有人单击“下一个”箭头,则播放适当的轨道。这是到目前为止我的代码:

<!doctype html>

<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
<script src="js/lightbox-plus-jquery.min.js"></script>

<meta charset="utf-8">
<title>verenti ltd</title>
<meta name="viewport" content="width-device-width, initial-scale=1.0">
<meta name="author" content="SitePoint">

</head>

<body bgcolor="#F7FBED ">

<div class="gallery">
<a href="images/drake_big.jpg" data-lightbox="mygallery" data-title="nick drake"
onclick=PlaySound("music/drake.mp3")><img src="images/drake_small.jpg"></a>
<a href="images/prine_big.jpg" data-lightbox="mygallery" data-title="john prine"
onclick=PlaySound("music/prine.mp3")> <img src="images/prine_small.jpg"></a>
<a href="images/westerberg_big.jpeg" data-lightbox="mygallery" data-title="paul westerberg"
onclick=PlaySound("music/westerberg.mp3")> <img src="images/westerberg_small.jpg"></a>
<a href="images/townes_big.png" data-lightbox="mygallery" data-title="townes van zandt"
onclick=PlaySound("music/townes.mp3")> <img src="images/townes_small.jpg"></a>
<script>
function PlaySound(path) {
//this function will work like a toggler for sound track playing
var sound = document.getElementById(path);
if(sound && sound.currentTime > 0){ //check whether it is already playing
sound.pause();// stop the sound
sound.currentTime = 0 //
}else if(sound){
//this block to play paused sound track
sound.play();
}else{
//this block to play new sound track
sound= document.createElement('audio');
sound.setAttribute('src', path);
sound.setAttribute('id', path);
sound.play();
}
}

</script>
</div>
</body>
</html>

我认为我可以更好地利用该标签?

最佳答案

一个简单的解决方案是:

    <script>
function PlaySound(path) {
//this function will work like a toggler for sound track playing
var sound = document.getElementById(path);
if(sound && sound.currentTime > 0){ //check whether it is already playing
sound.pause();// stop the sound
sound.currentTime = 0 //
}else if(sound){
//this block to play paused sound track

sound.play();
}else{
//this block to play new sound track

sound= document.createElement('audio');
sound.setAttribute('src', path);
sound.setAttribute('id', path);
sound.play();
}


}

</script>

关于javascript - 在鼠标单击事件上停止音轨,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53359802/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com