Javascript 单击其他音频元素时暂停音频_Javascript_Audio_Playback

Javascript 单击其他音频元素时暂停音频

javascript audio

Javascript 单击其他音频元素时暂停音频,javascript,audio,playback,Javascript,Audio,Playback,我正试图回到大约4个月前我正在建设的项目中。我停止了编码的时间和男孩我挣扎。基本上，我的应用程序在单击图像时播放一首歌曲。问题是，如果单击其他图像，第一个音频将继续播放。我错过了什么 <!DOCTYPE html> <html lang="en"> <head> <script src="Resources\js\p5.js"></script> <script language="javascript" type="t

我正试图回到大约4个月前我正在建设的项目中。我停止了编码的时间和男孩我挣扎。基本上，我的应用程序在单击图像时播放一首歌曲。问题是，如果单击其他图像，第一个音频将继续播放。我错过了什么

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="Resources\js\p5.js"></script>
  <script language="javascript" type="text/javascript" src="Resources\js\p5.dom.js"></script>
  <link rel="stylesheet" type="text/css" href="Resources\css\style.css">
  <title>Pressn.Listen</title>
</head>
<body>
  <h1>Pressn.Listen</h1>

    <section>
    <ul id="image-list" style="list-style-type: none">
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/v4mfc9ql89q60hn/DSCF8693.jpg?dl=0" alt="pink-flowers"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/ywri0sg4i16nbc2/DSCF7307.jpg?dl=0" alt="overpass-sky"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/xpslama3reuniwz/DSCF6953.jpg?dl=0" alt="home-doorway"></input></li>
      <li><input type="image" class="images" src="https://dl.dropboxusercontent.com/s/73xltoeeoyq78y7/20181029-DSCF6165.jpg?dl=0" alt="garage"></input></li>
    </ul>
    </section>
    <footer>
      <nav>
        <ul id="nav-bar" style="list-style-type: none">
          <li>
            <a class="links" target="_blank" href="https://mobile.twitter.com/eddiepearson">Twitter</a>
          </li>
             <li>
            <a class="links" target="_blank" href="https://github.com/eddiepearson">Github</a>
          </li>
        </ul>
      </nav>
     </footer>

     <audio id="song1" src="Resources\sounds\loopy loop 1.mp3"></audio>
     <audio id="song2" src="Resources\sounds\Automation city master.mp3"></audio>
</body>
<script type="text/javascript" src="Resources\js\app.js"></script>
</html>

@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto Mono', monospace;
}

body, html {
  background-color: #f2f2f2;
}

body {
  position: relative;
  z-index: 2;
}

header {
  text-align: right;
  margin: 3rem;
}

h1 {
  margin: 5rem 0 1rem 7rem;
  background: linear-gradient(90deg, rgba(0,25,36,1) 0%, rgb(118, 181, 211) 0%, rgba(255,206,249,1) 36%);
  -webkit-background-clip: text;
   background-clip: text;
  -webkit-text-fill-color: transparent;
}

#image-list {
  margin: 8rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  max-width: 1000px;
}

.images {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  border: none;
  box-shadow: 5px 5px 0 0 rgba(19, 19, 19, 0.15);

}

.ease {
  /* transition: transform 2.5s ease-out;
  transform: translateY(4px);
  transform: scale(2);  */
  animation-name: stretch;
  animation-duration: 2.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
  }
  50% {
  }
  100% {
    transform: scale(1.5);
  }
}

input:hover {
  -webkit-filter: brightness(70%);
  filter: brightness(70%);
  transition: 0 3s ease;
}

#nav-bar {
  display: flex;
  justify-content: center;
  margin: 5rem;
}

#nav-bar li {
  margin: 2rem;
}

.links {
  text-decoration: none;
  padding: 1rem;
  color: black;
  box-shadow: 5px 5px 0 0 rgba(19, 19, 19, 0.15);
  border-radius: 10px;
  transition: 0s;
}

.links:hover {
    color: white;
    background: linear-gradient(90deg, rgba(0,25,36,1) 0%, rgba(54,123,156,1) 0%, rgba(198,153,192,1) 70%);
  transition:.5s;
}


.links:after {
  transform: translateY(4px);
}

@media screen and (max-width: 600px) {
  #image-list {
    margin: 3rem;
  }

  h1 {
    margin: 5rem 3rem 10rem 3rem;
  }
}

@media screen and (max-width: 1000px) {
  #image-list {
    margin: 3rem;
  }
}


let animation = document.querySelector('.ease');
let img1 = document.querySelector('li:nth-child(1)');
let img2 = document.querySelector('li:nth-child(2)');
let song1 = document.querySelector('#song1');
let song2 = document.querySelector('#song2');

//play pause 
img1.addEventListener('click', function() {
    if(song1.paused) {
        song1.play();
        //this.classList.toggle('ease');
    } else {
        song1.pause();
        //this.classList.toggle('ease');
    }
});

img2.addEventListener('click', function() {
    if(song2.paused) {
        song2.play();
        //this.classList.toggle('ease');
    } else {
        song2.pause();
        //this.classList.toggle('ease');
    }
});


按，听
按，听












@导入url（'https://fonts.googleapis.com/css?family=Roboto+单体'；
* { 
保证金：0；
填充：0；
框大小：边框框；
字体系列：“Roboto Mono”，monospace；
}
正文，html{
背景色：#F2F2；
}
身体{
位置：相对位置；
z指数：2；
}
标题{
文本对齐：右对齐；
保证金：3rem；
}
h1{
保证金：5雷姆0 1雷姆7雷姆；
背景：线性梯度（90度，rgba（0,25,36,1）0%，rgb（118181211）0%，rgba（255206249,1）36%）；
-webkit背景剪辑：文本；
背景剪辑：文本；
-webkit文本填充颜色：透明；
}
#图像列表{
保证金：8rem自动；
显示：网格；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
栅隙：10px；
最大宽度：1000px；
}
.图像{
显示：块；
宽度：100%；
身高：100%；
对象匹配：覆盖；
边界半径：10px；
边界：无；
盒影：5px5px0rgba（19,19,19,0.15）；
}
.放松{
/*转型：转型2.5s放松；
变换：translateY（4px）；
变换：尺度（2）*/
动画名称：拉伸；
动画持续时间：2.5s；
动画计时功能：放松；
动画延迟：0；
动画方向：交替；
动画迭代次数：无限；
动画填充模式：无；
动画播放状态：运行；
}
@关键帧拉伸{
0% {
变换：缩放（.3）；
}
50% {
}
100% {
转换：比例（1.5）；
}
}
输入：悬停{
-webkit过滤器：亮度（70%）；
滤光片：亮度（70%）；
过渡期：0.3s；
}
#导航条{
显示器：flex；
证明内容：中心；
保证金：5雷姆；
}
#巴里导航{
保证金：2rem；
}
.链接{
文字装饰：无；
填充：1rem；
颜色：黑色；
盒影：5px5px0rgba（19,19,19,0.15）；
边界半径：10px；
转换：0s；
}
.链接：悬停{
颜色：白色；
背景：线性梯度（90度，rgba（0,25,36,1）0%，rgba（54123156,1）0%，rgba（198153192,1）70%）；
过渡：.5s；
}
.链接：之后{
变换：translateY（4px）；
}
@媒体屏幕和屏幕（最大宽度：600px）{
#图像列表{
保证金：3rem；
}
h1{
保证金：5雷姆3雷姆10雷姆3雷姆；
}
}
@媒体屏幕和屏幕（最大宽度：1000px）{
#图像列表{
保证金：3rem；
}
}
让动画=document.querySelector（'.ease'）；
设img1=document.querySelector（'li:n个子项（1）'）；
设img2=document.querySelector（'li:n第n个子（2）'）；
让song1=document.querySelector（“#song1”）；
让song2=document.querySelector（“#song2”）；
//暂停播放
img1.addEventListener（'click'，function（）{
如果（歌曲1.暂停）{
歌曲1.play（）；
//this.classList.toggle（'ease'）；
}否则{
歌曲1.暂停（）；
//this.classList.toggle（'ease'）；
}
});
img2.addEventListener（'click'，function（）{
如果（歌曲2.暂停）{
歌曲2.play（）；
//this.classList.toggle（'ease'）；
}否则{
歌曲2.暂停（）；
//this.classList.toggle（'ease'）；
}
});

当你开始播放一首歌时，停止另一首

img1.addEventListener('click', function() {
    if(song1.paused) {
        song2.pause(); // <--- this piece
        song1.play();
    } else {
        song1.pause();
    }
});

img1.addEventListener（'click'，function（）{
如果（歌曲1.暂停）{
song2.pause（）；//嗨，很抱歉我这么晚才开始。我尝试了你的方法，它说“song2.pause不是函数”，而且，在某个时候，我希望有大约5个声音。在这一点上，我应该做一个循环吗？我尝试了做一系列的声音，然后每次单击都循环它们，但它不起作用。