如何通过一个按钮或链接切换音频播放()暂停()? [英] How to toggle audio play() pause() with one button or link?

问题描述

我有一个音频文件，可以在单击锚标记时播放.如果再次单击锚标记，我希望音频暂停，我只是对 javascript 了解得不够多，无法将后半部分拉下来.我不想更改他们点击的锚标签的内容，我只想在他们点击标签时启动和暂停音频文件.

I have an audio file that plays when an anchor tag is clicked. If the anchor tag is clicked again, I want the audio to pause, I just don't know enough about javascript to pull this second half off. I don't want to change the content of the anchor tag they click, I just want the audio file to start and pause whenever they click the tag.

这是我目前所拥有的，至少使声音文件可以播放:

This is what I have so far, which at least makes the sound file playable:

<audio id="audio" src="/Demo.mp3"></audio>
<a onClick="document.getElementById('audio').play()">Click here to hear.</a>

推荐答案

Vanilla Javascript 方式来完成您的需求.

A Vanilla Javascript way to do what you required.

注意:我注意到对其他问题的评论对原生 js 方法有多个赞成票，并且看到 OP 没有 jquery 标签.

Note: I've noticed comments on other question with multiple upvotes for a native js approach and saw the OP has no jquery tag.

所以工作示例:

So WORKING EXAMPLE:

SOLN 1:(我使用事件的初始解决方案)

SOLN 1: (my initial soln using events)

var myAudio = document.getElementById("myAudio");
var isPlaying = false;

function togglePlay() {
  isPlaying ? myAudio.pause() : myAudio.play();
};

myAudio.onplaying = function() {
  isPlaying = true;
};
myAudio.onpause = function() {
  isPlaying = false;
};

<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>

SOLN 2:(使用基于 dandavi 的评论)

SOLN 2: (using myAudio.paused property based on dandavi's comment)

var myAudio = document.getElementById("myAudio");

function togglePlay() {
  return myAudio.paused ? myAudio.play() : myAudio.pause();
};

<audio id="myAudio" src="http://www.sousound.com/music/healing/healing_01.mp3" preload="auto">
</audio>
<a onClick="togglePlay()">Click here to hear.</a>

这篇关于如何通过一个按钮或链接切换音频播放()暂停()?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！