如何在点击图标时打开音频 play/pause

Question

我有 play/pause 图标。如果我按下它，我需要打开音频。我创建了图标，但是当按下它时没有任何反应，我的意思是出了点问题。

CSS:

.player {
    width: 20px;
    height: 20px;
    background: url('https://image.flaticon.com/icons/svg/149/149657.svg') no-repeat center center;
 }

HTML:

<div class="player">
    <img src="" onclick="togglePlay(this)" id="button">
    <audio>
        <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
    </audio>
</div>

JS:

function togglePlay(video) {
  var audio = document.getElementsByTagName("audio")[0];
  if (audio) {
    if (audio.paused) {
        audio.play();
        document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149658.svg";
    } else {
        audio.pause();
        document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149657.svg";
    }
  }
}

有什么问题？我需要在 css 上显示我的 img。如何使用图标打开音频？如果可以，请帮助我。谢谢

Answer 1

在播放器上尝试 onclick 方法 class。有效。

<div class="player" onclick="togglePlay(this)">
    <img src="" id="button">
    <audio>
        <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
    </audio>
</div>

Answer 2

您的代码需要进行少量更改。请参阅下面的代码片段。

function togglePlay() {
  var audio = document.getElementsByTagName("audio")[0];
   
  if (audio) {
    if (audio.paused) {
        audio.play();
       document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149658.svg";
    } else {
        audio.pause();
        document.getElementById("button").src ="https://image.flaticon.com/icons/svg/149/149657.svg";
    }
  }
}

.player {
    width: 20px;
    height: 20px;
 }

<div class="player">
  <img id ="button" onclick="togglePlay()" src ="https://image.flaticon.com/icons/svg/149/149657.svg">
    <audio>
        <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
    </audio>
</div>

Answer 3

先定义暂停和播放两种样式，

.playbg{
  background:url(https://image.flaticon.com/icons/svg/149/149657.svg);
}

.pausebg{
    background:url(https://image.flaticon.com/icons/svg/149/149658.svg);
}

然后给玩家一个ID，"player"供参考...

<div id="player" class="player">
    <img src="" onclick="togglePlay(this)" id="button">
    <audio>
       <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
    </audio>
</div>

这里我们定义脚本，并确保像我下面那样加载 jquery.. 当页面加载时，$(document).ready 它使用播放按钮初始化按钮，当

<script type="text/javascript">

    //when the page loads, set the paused property to true
    var paused = true;

    //add the play image to the button... 
    $(document).ready(function(){
        $('#player').find('img').addClass('playbg');    
    });

   //and the toggle play button checks and sees if the variable is set or not, and replaces the image background, by alternating the classes using jquery. 

  function togglePlay() {
      var audio = $('#player').find('audio');         
      if (paused) {
            //audio.play();
            $('#player').find('img').removeClass('playbg').addClass('pausebg'); 
            paused = false;
        } else {
            //audio.pause();
            $('#player').find('img').removeClass('playbg').addClass('pausebg');

        }
      }
    }   
</script>
<script type="text/javascript> src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如何在点击图标时打开音频 play/pause

How to turn on audio on click icon play/pause

html

javascript

css

responsive