使用javascript选中复选框时播放音频_Javascript_Audio_Checkbox

使用javascript选中复选框时播放音频

javascript audio checkbox

使用javascript选中复选框时播放音频,javascript,audio,checkbox,Javascript,Audio,Checkbox,我试图在选中html复选框时播放一个简短的音频文件。我可能遗漏了一些基本的东西。这是我的密码： <body> <input type="checkbox" id="cena" onchange="myfunction()"></input><label for="cena"></label> </label><script> function myfunction(){ var audio = new

我试图在选中html复选框时播放一个简短的音频文件。我可能遗漏了一些基本的东西。这是我的密码：

<body>
    <input type="checkbox" id="cena" onchange="myfunction()"></input><label for="cena"></label>
</label><script>
function myfunction(){
var audio = new audio('rusbtaudio.mp3');
audio.play();
}
</script>
    </body>


函数myfunction（）{
var audio=新音频（'rusbtaudio.mp3'）；
音频播放（）；
}

rusbtaudio.mp3

与html文件位于同一文件夹中。

您好，您应该试试这个

<input type="checkbox" id="cena" onclick="myfunction()"></input><label   
for="cena"></label>
</label>

<script>
function myfunction(){
var audio = new Audio('sel.mp3');
audio.play();
}


函数myfunction（）{
var audio=新音频（'sel.mp3'）；
音频播放（）；
}

JavaScript:

var audio = new Audio('rusbtaudio.mp3'),
    cenaCheckbox = document.getElementById('cena'),
    myfunction = function () {
      if (cenaCheckbox.checked) {
        audio.play();
      }
    };

Html:

您的代码几乎正确！唯一的问题是这一行：

new audio('rusbtaudio.mp3');

只需将

audio

更改为

audio

-签出

标记也存在一些问题，例如冗余的

和不必要的第二个

，但即使它可以工作。

元素是自动关闭的。使用

.load（）

，

可以播放事件。用新音频（）替换新音频（）


var audio=新音频（'rusbtaudio.mp3'）；
audio.oncanplay=函数（）{
如果（document.getElementById（“cena”）.checked）this.play（）
}
函数myfunction（el）{
如果（标高已勾选）{
load（）；
}
}
您的代码有以下错误UncaughtTypeError:audio不是构造函数，请尝试此代码，使用带有HTML5 audio标记的本机JavaScript
HTML

不支持画布
玩

JavaScript
<script>
    // Create a couple of global variables to use. 
    var audioElm = document.getElementById("audio1"); // Audio element     

    //  Alternates between play and pause based on the value of the paused property
    function togglePlay() {
      if (document.getElementById("audio1")) {
        if (audioElm.paused == true) {
          playAudio(audioElm);    //  if player is paused, then play the file
        } else {
          pauseAudio(audioElm);   //  if player is playing, then pause
        }
      }
    }
    function playAudio(audioElm) {
      // Get file from text box and assign it to the source of the audio element 
      audioElm.src = document.getElementById('audioFile').value;
      audioElm.play();
    }

    function pauseAudio(audioElm) {
      audioElm.pause();
    }

</script>


//创建两个要使用的全局变量。
var audioElm=document.getElementById（“audio1”）；//音频元素
//根据暂停属性的值在播放和暂停之间交替
函数togglePlay（）{
if（document.getElementById（“audio1”））{
如果（audioElm.paused==true）{
playAudio（audioElm）；//如果播放器暂停，则播放文件
}否则{
pauseAudio（audioElm）；//如果播放器正在播放，则暂停
}
}
}
功能播放音频（audioElm）{
//从文本框中获取文件并将其指定给音频元素的源
audioElm.src=document.getElementById（'audioFile'）.value；
audioElm.play（）；
}
功能pauseAudio（audioElm）{
audioElm.pause（）；
}

不要在意额外的内容，它应该是新的音频（…）
。。。您应该检查是否已选中，而不是更改
元素是否自动关闭。使用canplay
事件。您可以使用.load（）
在每次更改事件中创建新音频（）
，而不是创建新音频（）
。请详细说明一下，好吗？我不得不原谅，我对javascript的了解很少。在我的IT课程中，我们还没有开始使用javascript，css也不能完成这个简单的任务。我真的很感激看到我必须做的改变。当音频暂停时？这是错误的。例如，输入是自动关闭的。其次，他们想要的是选中时，而不是每次单击时！
<body>
    <input type="checkbox" id="cena" onchange="myfunction(this)" />
    <label for="cena"></label>
<script>
  var audio = new Audio('rusbtaudio.mp3');
  audio.oncanplay = function() {
    if (document.getElementById("cena").checked) this.play()
  }
  function myfunction(el) {    
    if (el.checked) {
      audio.load();
    }
  }
</script>
</body>

<body>
  <audio id="audio1" hidden="hidden">Canvas not supported</audio>
  <input type="hidden" id="audioFile" value="rusbtaudio.mp3" size="60" />
  <input type="checkbox" id="playbutton" onclick="togglePlay();">Play
</body>

<script>
    // Create a couple of global variables to use. 
    var audioElm = document.getElementById("audio1"); // Audio element     

    //  Alternates between play and pause based on the value of the paused property
    function togglePlay() {
      if (document.getElementById("audio1")) {
        if (audioElm.paused == true) {
          playAudio(audioElm);    //  if player is paused, then play the file
        } else {
          pauseAudio(audioElm);   //  if player is playing, then pause
        }
      }
    }
    function playAudio(audioElm) {
      // Get file from text box and assign it to the source of the audio element 
      audioElm.src = document.getElementById('audioFile').value;
      audioElm.play();
    }

    function pauseAudio(audioElm) {
      audioElm.pause();
    }

</script>