当javascript复选框被选中时播放音频

Play audio when checkbox is checked with javascript

本文关键字：播放 音频 javascript 复选框      更新时间：2023-09-26

我试图使一个短音频文件播放时，一个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>

rusbtaudio.mp3与html文件在同一文件夹

<input>元素自闭。使用.load()、canplay事件。用new Audio()代替new audio() 

<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>

JavaScript:

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

<input type="checkbox" id="cena" onchange="myfunction();"/>

你好，你应该试试这个

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

你的代码几乎是正确的!唯一的问题在这一行:

new audio('rusbtaudio.mp3');

只需将audio更改为Audio -查看文档

也有一些问题与标签，如多余的</input>和不需要的第二个</label>，但即使它将工作。

你的代码有以下错误Uncaught TypeError: audio is not a constructor, try this code, native JavaScript with HTML5 audio tag

HTML 

<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>
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>

我认为在复选框中添加暂停功能是值得的(并非所有用户都喜欢背景音乐)。我做到了

<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();
         } else {
           audio.pause(); //pause audio
         }
       }
</script>
</body>
相关文章：