Question

我需要隐藏音频标签并通过单击按钮来播放它。我无所适从-$('#audio').play();和$('#audio').triger('play');-

下面的代码段中没有源文件，但实际上它存在。单击播放controls按钮可正常播放。

$('button').on('click', function(){
    $('#audio').play();
    //$('#audio').triger('play'); - also tried
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio controls id='audio'><source src="audio/clock.mp3" type="audio/mpeg"></audio>

<button>PLAY</button>

Answer 1

document.getElementById("audio").play();

Answer 2

由于$('#audio')是一个jquery对象，.play()无效，因为它不是与jquery相关的函数。使用$('#audio').get(0).play()通过jquery播放文件

$('button').on('click', function(){
    $('#audio').get(0).play();
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio  id='audio'><source src="audio/clock.mp3" type="audio/mpeg"></audio>

<button>PLAY</button>

或者使用JavaScript

$('button').on('click', function(){
    document.getElementById('audio').play();
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio  id='audio'><source src="audio/clock.mp3" type="audio/mpeg"></audio>

<button>PLAY</button>

Answer 3

<audio controls id='audio' style='display:none'><source src="audio/clock.mp3" type="audio/mpeg"></audio>

$("button").on('click', function(){
document.getElementById("audio").play();

});

您可以尝试一下。.我在音频标签中添加了样式部分

Answer 4

我了解的是，您想在单击按钮时隐藏/播放音频，然后在再次单击时显示/停止播放音频。

$(document).ready(function() {
    // Play flag
    var isPlaying = false;
    var audio = $('#audio')[0];
    var playBtn = $('#playBtn');

    // On click event
    playBtn.click(function() {
      if (!isPlaying) {
          playAudio();
      } else {
          stopAudio();
      }
    });

    function playAudio() {
      // set the flag to true
      isPlaying = true;
      // Play your audio
      audio.play();
      // Hide it
      $(audio).attr('hidden', 'hidden');
      // Change the button text to STOP
      playBtn.text('STOP');
    }

    function stopAudio() {
      // Set flag to false
      isPlaying = false;
      // Pause your audio
      audio.pause();
      // uncomment this if you want to reset the audio
      // audio.currentTime = 0;

      // Show it again
      $(audio).removeAttr('hidden');
      // Change the text back to play
      playBtn.text('PLAY');
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<audio controls id="audio" src="audio/clock.mp3"></audio>
<button id="playBtn">PLAY</button>

如果您只想播放和隐藏它，请尝试以下操作：


var audio = $('#audio')[0];
var playBtn = $('#playBtn');

// On click event
playBtn.click(function() {
    // Play your audio
    audio.play(); 
    // Hide it
    $(audio).attr( 'hidden', 'hidden' );
    // Remove this if you don't want to change the button text
    playBtn.text('PLAYING');
});

如何在按钮上隐藏和播放音频标签

4 个答案: