как скрыть и воспроизвести звуковую метку при нажатии кнопки

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).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');
});

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.getElementById("audio").play();