使用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()和.pause()功能也可以在音频/视频元素上使用。

$('#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>