javascript - 当用户退出页面时,jQuery HTML5 音频停止
问题描述
我不精通 js 或 jquery,目前我的网站上有播放列表和 html5 音频文件。现在,当用户离开页面时,如果正在播放音频,它会继续播放。没有办法关闭它。我有它,所以键盘控制是打开的,但是如果用户进入一个网络表单,每次你按下空格键时,音频都会打开和关闭。无论如何,这是我的播放列表的 javascript。在那之后我被困住了。我也在 Rails 5 中使用它。
<script type="text/javascript">
var hap_player;
jQuery(document).on('turbolinks:load', function() {
var settings = {
instanceName: "artwork5",
sourcePath: "",
activePlaylist: "",
activeItem: 0,
volume: 0.5,
autoPlay: false,
preload: "auto",
randomPlay: false,
loopingOn: true,
mediaEndAction: "next",
soundCloudAppId: "",
gDriveAppId: "",
usePlaylistScroll: true,
playlistScrollOrientation: "vertical",
playlistScrollTheme: "dark-2",
useKeyboardNavigationForPlayback: false,
facebookAppId: "644413448983338",
useNumbersInPlaylist: true,
sortableTracks: false,
playlistItemContent: "title"
};
hap_player = $("#hap-wrapper").hap(settings);
$('.hap-playlist-toggle').on('click', function() {
var playerHolder = $('.hap-player-holder'),
ease = 'easeInOutCubic',
time = 500,
openValue = $("#hap-wrapper").width() - 50;
if (!hap_player.playlistOpened) {
playerHolder.stop().animate({
'left': openValue + 'px'
}, {
duration: time,
easing: ease,
complete: function() {
playerHolder.addClass('hap-player-holder-opened');
}
});
} else {
playerHolder.css('left', playerHolder.css('left')).removeClass('hap-player-holder-opened').stop().animate({
'left': 0 + 'px'
}, {
duration: time,
easing: ease
});
}
hap_player.playlistOpened = !hap_player.playlistOpened;
})
});
</script>
解决方案
推荐阅读
- security - Microsoft 是否有推荐的方法来处理 HttpClient 中标头中的机密?
- reactjs - Reducer 未连接到 redux 状态
- angular - Angular 8 使元素正方形抛出错误:ExpressionChangedAfterItHasBeenCheckedError
- python - 将制表符分隔的 .txt 解析为 Pandas DataFrame
- r - R blogdown 找不到图像文件
- python - Keras SimpleRNN / LSTM 默认使用哪个轴作为时间轴?
- javascript - React - .setState 部分不起作用
- reactjs - React - 组件定义缺少显示名称
- smalltalk - Smalltalk,将命令行参数作为文件名
- laravel - 在 Laravel 中找不到查看页面