Question

我有此代码，只是在播放，但是我想使用相同的按钮（图像）播放和暂停，但我不知道需要添加什么，需要做什么？请帮助我

        <script>
          function play(){
               var audio = document.getElementById("audio");
               audio.play();
                         }
           </script>

        <input type="image" id= "Portada1" src= "https://66.media.tumblr.com/dc48784826909289a58767fed35ba421/tumblr_pu7p4w8Jai1yrcbyio1_1280.jpg" alt ="Portada del sencillo Tim McGraw de Taylor Swift." onclick="audio.play  ()">


        <audio id="audio" src="Audio/Teardrops On My Guitar.mp3" ></audio>

         </body>

Answer 1

<input type='image'>实际上是精美的提交按钮，当嵌套在<form>中时可以使用全部功能，但是出于OP的目的，带有<button>的{{1}}不仅在语义上准确，但也确保不会有任何副作用。

background-image

要在音频对象上切换<button type='button'></button> button { background: url(https://example.com/path/to/image.jpg)....}和.play()方法，请使用

.pause()

OR

  if (audio.paused || audio.ended) {... //if audio is not playing

  if (audio.playing) {... // if audio is playing

document.querySelector('button').onclick = player;

function player(event) {
  const clicked = event.target;
  clicked.classList.toggle('playing');
  const song = document.querySelector('audio');
  if (song.paused || song.ended) {
    song.play();
  } else {
    song.pause();
  }
}

button {
  background: url(https://www.hardwoodandhollywood.com/pop-culture-spin/wp-content/uploads/sites/7/2015/02/florencemachine.jpg)no-repeat;
  background-size: contain;
  display: inline-block;
  width: 124px;
  height: 86px;
  cursor: pointer;
  border: 3px solid rgba(158, 127, 103, 0.7);
  box-shadow: 4px 6px 7px rgba(158, 127, 103, 0.6);
  border-radius: 20%;
}

button:hover {
  border: 3px solid rgba(158, 127, 103, 1);
}

.playing {
  border: 3px solid rgba(58, 127, 203, 0.7);
  box-shadow: 4px 6px 7px rgba(58, 127, 203, 0.6);
}

.playing:hover {
  border: 3px solid rgba(58, 127, 203, 1);
}

button:focus {
  outline: 0
}

Answer 2

引入全局布尔变量
点击按钮即可更改
根据此变量播放或暂停

// on top of your JS file
let isPlaying = false;
// your function
function play() {
  var audio = document.getElementById("audio");
  if (isPlaying) {
    audio.play();
  } else {
    audio.stop();
  }
  isPlaying = !isPlaying;
}

Answer 3

<audio controls> <source src="Audio/Teardrops On My Guitar.mp3"> </audio> 使用HTML5尝试此操作，但由于某些浏览器无法播放mp3，您可能需要添加.ogg源文件

`

` T

请使用同一按钮播放和暂停音频

3 个答案: