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

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>