Question

我是javascript的新手。这可能不是我想要实现的正确方法，但正如标题所说，我试图播放音频文件并在两个图像之间切换，这些图像充当暂停和播放按钮。下面是我到目前为止，我似乎无法隐藏暂停按钮和显示播放按钮。

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/track.mp3');
audioElement.setAttribute('autoplay', 'autoplay');
//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);

if (audioElement.paused) {
        audioElement.play();
        $('.pause').show();
        $('.play').hide();
    } 
else {
        audioElement.pause();
        $('.play').show();
        $('.pause').hide();
    }


$('.play').click(function() {
audioElement.play();
});


$('.pause').click(function() {
audioElement.pause();

有人能够指出我出错的地方吗？

Answer 1

在您的代码中，您在代码末尾错过了额外的});。

我不知道您是想在页面加载时还是在点击按钮上播放音频，因为您没有指定，这就是为什么我将为您提供两种不同的实现方式，首先是谁启动音频在页面加载和第二个，单击按钮开始播放音频（也使用new Audio而不是createElement(audio)）。两种方式都很棒。

如果您想以自己的方式进行操作，可以为playing和paused添加事件监听器。这是一种方法：

var audioElement = document.createElement('audio');
audioElement.id = 'audio-player';
audioElement.controls = 'controls';
audioElement.autoplay = 'autoplay';
audioElement.src = 'http://www.archive.org/download/bolero_69/Bolero.mp3';
audioElement.type = 'audio/mpeg';

audioElement.addEventListener('playing', function() {
  $('.pause').css('display', 'inline-block');
  $('.play').hide();
}, false);

audioElement.addEventListener('paused', function() {
  $('.pause').hide();
  $('.play').css('display', 'inline-block');
}, false);

$('.play').on('click', function() {
  $(this).hide();
  $('.pause').css('display', 'inline-block');
  audioElement.play();
});

$('.pause').on('click', function() {
  $(this).hide();
  $('.play').css('display', 'inline-block');
  audioElement.pause();
});

.play,
.pause {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.play {
  background: transparent url('https://cdn4.iconfinder.com/data/icons/social-messaging-productivity-1/128/play-icon-2-128.png') no-repeat;
  background-size: cover;
}
.pause {
  background: transparent url('https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-128.png') no-repeat;
  background-size: cover;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='play'></span>
<span class='pause'></span>

另一种简单的方法是使用new Audio()：

var audioElement = new Audio('http://www.archive.org/download/bolero_69/Bolero.mp3');

$('.play').on('click', function() {
  $(this).hide();
  $('.pause').css('display', 'inline-block');
  audioElement.play();
});

$('.pause').on('click', function() {
  $(this).hide();
  $('.play').css('display', 'inline-block');
  audioElement.pause();
});

.play,
.pause {
  width: 50px;
  height: 50px;
  display: inline-block;
}
.play {
  background: transparent url('https://cdn4.iconfinder.com/data/icons/social-messaging-productivity-1/128/play-icon-2-128.png') no-repeat;
  background-size: cover;
}
.pause {
  background: transparent url('https://cdn1.iconfinder.com/data/icons/material-audio-video/20/pause-circle-outline-128.png') no-repeat;
  background-size: cover;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='play'></span>
<span class='pause'></span>

如何使用jquery通过切换播放和暂停按钮播放音频？

1 个答案: