Неожиданное поведение при воспроизведении аудио в Javascript - PullRequest
Новая
       12

Неожиданное поведение при воспроизведении аудио в Javascript

0 голосов
/ 11 сентября 2018

enter image description here

Я изучаю JavaScript и создал эту очень простую страницу. Все, что он делает, это когда при нажатии Pikachu (изображение) воспроизводится аудиофайл.

Точно так же, если я наберу строку «Pikachu» в форме, она воспроизводит тот же звук, иначе он говорит «not found».

У меня есть следующий HTML 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Pokemon Cries</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="sounds.js"></script>
    </head>
    <body>
        <form>
            <input id="inputform" type="text" name="search">
            <button onclick="getdata()">Search</button>
        </form>
        <img class="images" src="images/pikachu.png" alt="Pikachu" onclick="pikachusound()">
    </body>
</html>

Мой JS 

var pikachu=new Audio("sounds/pikachu.mp3");

var inputstring;

function getdata()
{
    inputstring=document.getElementById("inputform").value;
    if(inputstring.toLowerCase()=="pikachu")
    {
        pikachusound();
    }
    else
    {
        alert("Not found");
    }
}
function pikachusound()
{
    pikachu.play();
}

и МОЙ CSS это 

body{
   margin: 0;
   padding: 0;
}
.images{
    height: 150px;
    width: 150px;
    margin: 20px;
    border-style: solid;
    border-radius: 50%;
    border-width: 5px;
    border-color: grey;
}

Щелчок по изображению работает очень хорошо, и он воспроизводит этот звук. Но когда я ввожу «Пикачу» в форме, он иногда воспроизводит звук, а иногда - нет.

После поиска в Интернете я не могу найти причину этого неожиданного поведения.

Может кто-нибудь помочь в поиске ошибки? Спасибо.

1 Ответ

0 голосов
/ 12 сентября 2018

Трудно знать наверняка, потому что вы можете только сказать нам, что «иногда» это работает, а «иногда» - нет. Но одним из виновников может быть то, что вы используете form с кнопкой submit (это тип по умолчанию button, который вы получаете, когда не указываете атрибут type). Когда отправляется form (автоматически запускается с click кнопки submit), страница перенаправляется, что приводит к прекращению работы любого другого кода на странице. В этом случае это будет «гонка» между getData() бегом и form отправкой, и выигрыш не всегда будет одинаковым.

Я бы посоветовал вам не использовать form здесь, потому что не похоже, что вы действительно отправляете какие-либо данные.

Вы также используете некоторые очень старые методы для кодирования в целом, поэтому взгляните на код ниже и обратите внимание на комментарии. 

var pikachu= new Audio("sounds/pikachu.mp3");
    
// Get a reference to the input element just once, not every time
// the function needs to run and don't set your variable to a property
// of the element, set it to the element itself. That way, if you 
// ever decide that you want to access another property of the element
// you don't have to re-scan for it.
var inputElement = document.getElementById("inputform");
var imageElement = document.querySelector("img[alt='Pikachu']");
var buttonElement = document.querySelector("button[type='button']");

// Don't set up events in the HTML with inline event handlers like "onclick"
// Follow modern standards and do all your event binding in JavaScript
buttonElement.addEventListener("click", getdata);
imageElement.addEventListener("click", pikachusound);
    
// In JavaScript, it's a best practice to put the opening curly brace {
// on the same line as the structure it defines because under certain
// circumstances, the code will actually run differently than when the
// brace is on the next line down.
function getdata() {
   if(inputElement.value.toLowerCase() == "pikachu") {
      pikachusound();
   } else {
      alert("Not found");
   }
}

function pikachusound(){
  console.log("Sound playing!");
  pikachu.play();
}
body{
       margin: 0;
       padding: 0;
}
   
.images{
   height: 150px;
   width: 150px;
   margin: 20px;
   border: 5px solid grey;
   border-radius: 50%;
}
<input id="inputform" type="text" name="search">
<!-- To get a regular button, specify the type -->
<button type="button">Search</button>

<img class="images" src="images/pikachu.png" alt="Pikachu">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...