TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-01 23:37:43 +03:00
Code Issues Projects Releases Wiki Activity

Refined audio card player with multiple playback rate options

Browse Source 
refs https://github.com/TryGhost/Team/issues/1230

- adds multiple playback rate option to audio card player on click
This commit is contained in:
Rishabh 2021-12-08 16:36:10 +05:30
parent 62988fe1db
commit 9cbaab119b
2 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/frontend/src/cards/css/audio.css
View File

@ -88,7 +88,7 @@
}
.kg-audio-playback-rate {
width: 36px;
width: 37px;
padding: 0 4px;
font-family: inherit;
font-size: .85em;

35
core/frontend/src/cards/js/audio.js
View File

@ -10,11 +10,25 @@ const handleAudioPlayer = function (audioElementContainer) {
const audio = audioElementContainer.querySelector('audio');
const durationContainer = audioElementContainer.querySelector('.kg-audio-duration');
const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time');
const outputContainer = audioElementContainer.querySelector('.kg-audio-volume-output');
// let playState = 'play';
// let muteState = 'unmute';
let playbackRate = 1.0;
let playbackRates = [{
rate: 0.75,
label: '0.7×'
}, {
rate: 1.0,
label: '1×'
}, {
rate: 1.25,
label: '1.2×'
}, {
rate: 1.75,
label: '1.7×'
}, {
rate: 2.0,
label: '2×'
}];
let raf = null;
let currentPlaybackRateIdx = 1;
audio.src = audioElementContainer.getAttribute('data-kg-audio-src');
@ -95,15 +109,10 @@ const handleAudioPlayer = function (audioElementContainer) {
});
playbackRateContainer.addEventListener('click', () => {
if (playbackRate === 1.0) {
audio.playbackRate = 2;
playbackRate = 2;
playbackRateContainer.textContent = '2×';
} else {
audio.playbackRate = 1.0;
playbackRate = 1.0;
playbackRateContainer.textContent = '1×';
}
let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
audio.playbackRate = nextPlaybackRate.rate;
playbackRateContainer.textContent = nextPlaybackRate.label;
});
audio.addEventListener('progress', displayBufferedAmount);