在Javascript中播放音频时出现意外行为

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Javascript中播放音频时出现意外行为相关的知识，希望对你有一定的参考价值。

enter image description here

我正在学习javascript并创建了这个非常简单的页面。它所做的就是，当点击皮卡丘（图像）时，播放音频文件。

同样，如果我在表单中键入字符串“Pikachu”，它会播放相同的声音，否则会显示“未找到”。

我有以下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;
}

单击图像可以很好地工作，并播放该音频。但是当我在表格中输入“皮卡丘”时，它有时播放声音，有时则不播放声音。

在网上搜索了很多，我找不到这种意外行为的原因。

任何人都可以帮助找到错误？谢谢。

答案

很难确切知道，因为你只能告诉我们“有时”它有效，而“有时”却没有。但是，一个罪魁祸首可能是你使用带有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">

以上是关于在Javascript中播放音频时出现意外行为的主要内容，如果未能解决你的问题，请参考以下文章

使用条件变量多线程时出现意外行为

点击播放音频时出现不必要的延迟

在 Safari 中多次播放 HTML5 音频时出现问题

在 PostgreSQL 中将双精度转换为文本时出现意外行为

将子视图添加到 UICollectionViewCell 时出现意外行为

从套接字读取时出现意外行为