使用 jquery 单击图像按钮时控制音频播放器

Question

我已经开始创建我的音频播放器并想使用图像（播放和停止图像）来控制它。到目前为止我有什么：

audio.html

<div id="audioPlayer">
    <audio id="mediPlay" preload="none" controls="controls">
        <source src="audio/Crystaligned Dream (Short Version).mp3" type="audio/mpeg">
    </audio>
    <img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/>
    <img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
</div>

controls.js

$(document).ready(function () { 
  $('#playBtn').on('click', function () {
    $('player').play();
  }, false); 
  $('#stopBtn').on('click', function () {
    $('player').stop();
  }, false);
});

Answer 1

DOM播放器没有.stop()功能。您应该改用 .pouse()。 .play() and .pause() 函数也适用于 audio/video 元素。

$('#playBtn').on('click', function () {
  $('audio')[0].play();
});
$('#stopBtn').on('click', function () {
  $('audio')[0].pause();
});

$('#playBtn').on('click', function () {
  $('audio')[0].play();
});
$('#stopBtn').on('click', function () {
  $('audio')[0].pause();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audioPlayer">
  <audio id="mediPlay" preload="none" controls="controls">
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  </audio>
  <img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/>&nbsp;<img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
</div>

如果您想重播音频，请使用此代码

$('audio')[0].currentTime = 0;
$('audio')[0].play();

$('#playBtn').on('click', function () {
  $('audio')[0].play();
});
$('#stopBtn').on('click', function () {
  $('audio')[0].pause();
});
$('#repBtn').on('click', function () {
  $('audio')[0].currentTime = 0;
  $('audio')[0].play();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="audioPlayer">
  <audio id="mediPlay" preload="none" controls="controls">
    <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
  </audio>
  <img class="mediaButton" id="playBtn" src="audio/img/play.png" alt="play"/>
  <img class="mediaButton" id="stopBtn" src="audio/img/stop.png" alt="stop" />
  <img id="repBtn" src="audio/img/stop.png" alt="replay" />
</div>

使用 jquery 单击图像按钮时控制音频播放器

Controlling audio player when click on image buttons using jquery

html

javascript

jquery

html5-audio