TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-04 17:04:59 +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 { .kg-audio-playback-rate {
width: 36px; width: 37px;
padding: 0 4px; padding: 0 4px;
font-family: inherit; font-family: inherit;
font-size: .85em; 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 audio = audioElementContainer.querySelector('audio');
const durationContainer = audioElementContainer.querySelector('.kg-audio-duration'); const durationContainer = audioElementContainer.querySelector('.kg-audio-duration');
const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time'); const currentTimeContainer = audioElementContainer.querySelector('.kg-audio-current-time');
const outputContainer = audioElementContainer.querySelector('.kg-audio-volume-output'); let playbackRates = [{
// let playState = 'play'; rate: 0.75,
// let muteState = 'unmute'; label: '0.7×'
let playbackRate = 1.0; }, {
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 raf = null;
let currentPlaybackRateIdx = 1;
audio.src = audioElementContainer.getAttribute('data-kg-audio-src'); audio.src = audioElementContainer.getAttribute('data-kg-audio-src');
@ -95,15 +109,10 @@ const handleAudioPlayer = function (audioElementContainer) {
}); });
playbackRateContainer.addEventListener('click', () => { playbackRateContainer.addEventListener('click', () => {
if (playbackRate === 1.0) { let nextPlaybackRate = playbackRates[(currentPlaybackRateIdx + 1) % 5];
audio.playbackRate = 2; currentPlaybackRateIdx = currentPlaybackRateIdx + 1;
playbackRate = 2; audio.playbackRate = nextPlaybackRate.rate;
playbackRateContainer.textContent = '2×'; playbackRateContainer.textContent = nextPlaybackRate.label;
} else {
audio.playbackRate = 1.0;
playbackRate = 1.0;
playbackRateContainer.textContent = '1×';
}
}); });
audio.addEventListener('progress', displayBufferedAmount); audio.addEventListener('progress', displayBufferedAmount);