Странная проблема с событиями onmouseover, не играющими звуки - PullRequest
Новая
       16

Странная проблема с событиями onmouseover, не играющими звуки

0 голосов
/ 03 октября 2018

Хорошо, недавно я попытался добавить звуковые эффекты в свое портфолио.Каждый раз, когда пользователь наводит указатель мыши на плитку, представляющую один из моих проектов, он издает звук.Кажется достаточно простым, верно?Ну, у меня странная ошибка.Звуки на первых двух панелях не воспроизводятся, пока не прозвучит звук на одной из панелей под ними.То есть мне нужно навести курсор мыши на «Austin Weather Monitor» или «Bomb Defuser», прежде чем прозвучат звуки «Crystal Collector» или «Train Timer».Вот мой полный код: 

<!DOCTYPE html>
<html lang ="en-us">
<head>
  <meta charset="UTF-8">
  <title>Portfolio</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="style.css">

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <style>

  #content {
    display: none;
  }

  .thumbnail:hover {
    border-style: solid;
    border-width: 3px;
    border-color:#E67F18;
  }
</style>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   </head>




<body onload="showStuff()">


    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html">Dennis Markham</a>
    </div>
    <ul class="nav navbar-nav">
      <li><a href="index.html">About Me</a></li>
      <li class = "active"><a href="portfolio.html">Portfolio</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </div>
</nav>


<!-- <div class ="container">
<section class ="row">
<div class ="col-md-1">
</div>
<div class="col-md-10"> 
<a href = "https://dennismarkham.github.io/trainTime/"> <img class = "portfolio" src = "images/dummy_image.png" alt ="train simulator"><span class = "caption">Train Timer </span></img></a> 


<a href = "https://dennismarkham.github.io/week-4-game/"><img class = "portfolio" src = "images/dummy_image.png" alt ="crystal collector"></img></a>


<a href = "#"><img class = "portfolio" src = "images/dummy_image.png" alt ="coming soon..."></img></a>
</div>
<div class = "col-md-1">
    </div>
</section>
</div> -->
<div id = "content">


<div class = "row">
<div class = "col-md-1">
</div>

<h1 style="padding: 5px; display: inline; border-radius:25px;">Solo Endeavors</h1>
<hr>
<br>
<br>
</div>

<div class="row">
    <div class = "col-md-2"></div>

  <div class="col-md-4" onmouseover ="crystal()">
    <div class="thumbnail">
      <a href="https://dennismarkham.github.io/week-4-game/">
        <img style = "height: 250px" src="images/crystal.png" alt="Crystal" style="width:100%">
        <div class="caption">
          <p>Crystal Collector</p>
        </div>
      </a>
    </div>
  </div>

<div class="col-md-4" onmouseover = "train()">
    <div class="thumbnail">
      <a href="https://dennismarkham.github.io/trainTime/">
        <img  style = "height: 250px" src="images/train2.png" alt="Train" style="width:100%">
        <div class="caption">
          <p>Train Timer</p>
        </div>
      </a>
    </div>
  </div>

  <div class = "col-md-2"></div>
</div>

<div class="row">
  <div class = "col-md-2"></div>

  <div class="col-md-4" onmouseover="boom()">
    <div class="thumbnail">
      <a href="https://dennismarkham.github.io/BombDefuser/">
        <img style = "height: 250px" src="images/bomb.png" alt="Bomb" style="width:100%">
        <div class="caption">
          <p>Bomb Defuser</p>
        </div>
      </a>
    </div>
  </div>

  <div class="col-md-4" onmouseover="thunder()">
    <div class="thumbnail">
      <a href="https://dennismarkham.github.io/trainTime/">
        <img  style = "height: 250px" src="images/weather.png" alt="Train" style="width:100%">
        <div class="caption">
          <p>Austin Weather Monitor</p>
        </div>
      </a>
    </div>
  </div>


  <div class = "col-md-2"></div>
</div>

<div class="row">
  <div class = "col-md-2"></div>

  <div class="col-md-4"  onmouseover="shutter()">
    <div class="thumbnail" >
      <a href="https://rphotogallery.herokuapp.com/">
        <img style = "height: 250px" src="images/camera.png" alt="camera" style="width:100%">
        <div class="caption">
          <p>React Photo Gallery</p>
        </div>
      </a>
    </div>
  </div>

  <div class="col-md-4">

  </div>


  <div class = "col-md-2"></div>
</div>

<div class = "row">
<div class = "col-md-1">
</div>
<h1 style="padding: 5px; display: inline; border-radius:25px;">Group Work</h1>
<hr>
<br>
<br>
</div>

<div class="row">
    <div class = "col-md-2"></div>


   <div class="col-md-4" onmouseover = "typing()">
    <div class="thumbnail">
      <a href="https://cacheualcorner.herokuapp.com/">
        <img src="images/CC.png" alt="Cache-ual Corner (chat room)" style="width:100%">
        <div class="caption">
          <p>Cache-ual Corner</p>
        </div>
      </a>
    </div>
  </div>

  <div class="col-md-4">
  </div>
  <div class = "col-md-2"></div>
</div>

</div>
<script>
//QUESTIONS:
//-Train sound and magic sound


var trainSound = new Audio("train.wav");
  trainSound.volume = 0.2;

  var crystalSound = new Audio("crystal.wav");
  crystalSound.volume = 0.5;

   var shutterSound = new Audio("shutter.wav");
   shutterSound.volume = 0.4;

  var thunderSound = new Audio("thunder.wav");
  thunderSound.volume = 0.3;

  var boomSound = new Audio("boom.mp3");
  boomSound.volume = 0.3;

  var typingSound = new Audio("typing.wav");
  typingSound.volume = 0.3;

  function showStuff() {
    $("#content").fadeIn("slow");
}


 function train(){
  trainSound.play();
 }

 function crystal(){
  crystalSound.play();
 }

 function shutter(){
 shutterSound.play();
 }

 function thunder(){
  thunderSound.play();
 }

 function boom(){
  boomSound.play();
 }

function typing(){
  typingSound.play();
}


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

Почему это?Я попытался изменить порядок переменных и функций в сценариях, но это ничего не меняет.

...