Question

我有我的音频元素：

<audio class='mp3audio' src='file.mp3'></audio>

我想在jQuery中单击播放按钮时执行一个函数或一个动作。我发现了许多用于创建自定义控件的内容，但是单击播放按钮时无需触发任何内容。最近的I've found is this，但我无法使用$(this)等有用的内容。

我真的想要这样的事情：

$('audio.mp3audio').click(function () {
    alert("you clicked play");      
});

但是我找不到任何文件？

Answer 1

您可以挂钩playing事件，这样无论audio元素如何被控制，您都可以运行代码;从播放控件，或手动通过代码。试试这个：

$('audio').on('playing', function() {
  console.log('playback started!');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto"   controls></audio>

Answer 2

将此对象作为

传递给函数

<audio class='mp3audio' src='file.mp3' onplay="myFunction(this)"></audio>

并将其作为

接收

function myFunction(element){
    console.log(element);
}

Answer 3

看看这个例子

＆＃13;

function playBeep() {
  var sound = document.getElementById("Sound")
  sound.play();
}

＆＃13;

<div class="animatedButton">

  <audio id="Sound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>

 
  <button id="aButton" onclick="playBeep()">
 beep
  </button>

</div>

＆＃13;

Answer 4

您可以通过以下三种方式执行此操作：

在HTML中：

<audio onplay="myScript">

在JavaScript中：

var audio = document.getElementById("myAudio");
audio.onplay=function(){myScript};

在JavaScript中，使用addEventListener（）方法：

var audio = document.getElementById("myAudio");
audio.addEventListener("play", myScript);

Answer 5

HTML

<audio class='myaudio' ></audio>

JQUERY

$('.myaudio').on('playing', function(){
//your code
});

单击<audio>上的播放按钮时触发功能

5 个答案: