ScCN/scratch-gui
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add fade in, fade out and mute effects

Browse Source
This commit is contained in:
Eric Rosenbaum committed 2019-07-09 15:32:29 -04:00
1 parent 8f949f532f
commit 7bbe5f0589
8 files changed
+195 -1
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/sound-editor/icon--fade-in.svg
+34
View File
@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
<title>Sound/Effects/Fade-in</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M17,0.750486449 L17,18.7504864 C17,18.9652762 16.7470196,19.0800706 16.5853738,18.9386306 C11.2946517,14.3092487 6.01748075,12.0004864 0.75,12.0004864 C0.611928813,12.0004864 0.5,11.8885576 0.5,11.7504864 L0.5,7.75048645 C0.5,7.61241526 0.611928813,7.50048645 0.75,7.50048645 C6.01748075,7.50048645 11.2946517,5.19172416 16.5853738,0.562342275 C16.7470196,0.420902266 17,0.535696746 17,0.750486449 Z" id="path-1"></path>
<path d="M6.00000018,9.25 L1,9.25 C0.861928813,9.25 0.75,9.13807119 0.75,9 C0.75,8.86192881 0.861928813,8.75 1,8.75 L6,8.75 C6.35324851,8.75 6.58270077,8.50876428 6.90437981,7.88536107 L7.04612021,7.6082292 C7.35582235,7.01071273 7.58718112,6.75 8,6.75 C8.3879427,6.75 8.64783618,6.89521764 9.05675678,7.24762061 L9.1299543,7.31093199 C9.51052276,7.64016497 9.70585257,7.75 10,7.75 C10.1999644,7.75 10.402585,7.39321162 10.7655628,6.41317141 C11.2359183,5.14321162 11.4592237,4.75 12,4.75 C12.4020616,4.75 12.6314717,4.8897049 12.9133418,5.21140451 C12.9679067,5.27426342 12.9973758,5.30824799 13.0201857,5.33390904 C13.2852046,5.63205537 13.5123572,5.75 14,5.75 C14.3765436,5.75 14.6926018,5.13162529 15.2628292,3.42094306 C15.9426018,1.38162529 16.2654325,0.75 17,0.75 C17.1380712,0.75 17.25,0.861928813 17.25,1 L17.25,17 C17.25,17.1380712 17.1380712,17.25 17,17.25 C16.2654325,17.25 15.9426018,16.6183747 15.2628292,14.5790569 C14.6926018,12.8683747 14.3765436,12.25 14,12.25 C13.5123572,12.25 13.2852046,12.3679446 13.0201857,12.666091 C12.9973758,12.691752 12.9679067,12.7257366 12.9133418,12.7885955 C12.6314717,13.1102951 12.4020616,13.25 12,13.25 C11.4592237,13.25 11.2359183,12.8567884 10.7655628,11.5868286 C10.402585,10.6067884 10.1999644,10.25 10,10.25 C9.70585257,10.25 9.51052276,10.359835 9.1299543,10.689068 L9.05675678,10.7523794 C8.64783618,11.1047824 8.3879427,11.25 8,11.25 C7.58718112,11.25 7.35582235,10.9892873 7.04612021,10.3917708 L6.90437981,10.1146389 C6.58270078,9.49123572 6.35324851,9.25 6.00000001,9.25 L6.00000018,9.25 Z" id="path-3"></path>
</defs>
<g id="Sound/Effects/Fade-in" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Secondary" opacity="0.25" transform="translate(1.250000, 0.250000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Fade" fill-rule="nonzero"></g>
<g id="Magenta/1_Magenta" mask="url(#mask-2)" fill="#CF63CF">
<g transform="translate(-1.250000, -0.250000)" id="Color">
<rect x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<g id="Primary" transform="translate(1.000000, 1.000000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Path" fill="#CF63CF" fill-rule="nonzero" xlink:href="#path-3"></use>
<g id="Magenta/1_Magenta" mask="url(#mask-4)" fill="#CF63CF">
<g transform="translate(-1.000000, -1.000000)" id="Color">
<rect x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

src/components/sound-editor/icon--fade-out.svg
+34
View File
@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
<title>Sound/Effects/Fade-out</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M0.75,1.00048645 C0.75,0.785696746 1.00298043,0.670902266 1.16462615,0.812342275 C6.45534831,5.44172416 11.7325193,7.75048645 17,7.75048645 C17.1380712,7.75048645 17.25,7.86241526 17.25,8.00048645 L17.25,12.0004864 C17.25,12.1385576 17.1380712,12.2504864 17,12.2504864 C11.7325193,12.2504864 6.45534831,14.5592487 1.16462615,19.1886306 C1.00298043,19.3300706 0.75,19.2152762 0.75,19.0004864 L0.75,1.00048645 Z" id="path-1"></path>
<path d="M13.25,10.5 C12.8967515,10.5 12.6672992,10.7412357 12.3456202,11.3646389 L12.2038798,11.6417708 C11.8941776,12.2392873 11.6628189,12.5 11.25,12.5 C10.8620573,12.5 10.6021638,12.3547824 10.1932432,12.0023794 L10.1200457,11.939068 C9.73947724,11.609835 9.54414743,11.5 9.25,11.5 C9.05003561,11.5 8.84741505,11.8567884 8.48443719,12.8368286 C8.01408171,14.1067884 7.79077635,14.5 7.25,14.5 C6.84793845,14.5 6.6185283,14.3602951 6.33665816,14.0385955 C6.28209329,13.9757366 6.25262416,13.941752 6.22981434,13.916091 C5.96479538,13.6179446 5.73764275,13.5 5.25,13.5 C4.87345642,13.5 4.55739824,14.1183747 3.98717082,15.8290569 C3.30739824,17.8683747 2.98456753,18.5 2.25,18.5 C2.11192881,18.5 2,18.3880712 2,18.25 L2,2.25 C2,2.11192881 2.11192881,2 2.25,2 C2.98456753,2 3.30739824,2.63162529 3.98717082,4.67094306 C4.55739824,6.38162529 4.87345642,7 5.25,7 C5.73764275,7 5.96479538,6.88205537 6.22981434,6.58390904 C6.25262416,6.55824799 6.28209329,6.52426342 6.33665816,6.46140451 C6.6185283,6.1397049 6.84793845,6 7.25,6 C7.79077635,6 8.01408171,6.39321162 8.48443719,7.66317141 C8.84741505,8.64321162 9.05003561,9 9.25,9 C9.54414743,9 9.73947724,8.89016497 10.1200457,8.56093199 L10.1932432,8.49762061 C10.6021638,8.14521764 10.8620573,8 11.25,8 C11.6628189,8 11.8941776,8.26071273 12.2038798,8.8582292 L12.3456202,9.13536107 C12.6672992,9.75876428 12.8967515,10 13.25,10 L18.25,10 C18.3880712,10 18.5,10.1119288 18.5,10.25 C18.5,10.3880712 18.3880712,10.5 18.25,10.5 L13.2499998,10.5 Z" id="path-3"></path>
</defs>
<g id="Sound/Effects/Fade-out" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Secondary" opacity="0.25" transform="translate(1.000000, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Fade" fill-rule="nonzero"></g>
<g id="Magenta/1_Magenta" mask="url(#mask-2)" fill="#CF63CF">
<g transform="translate(-1.000000, 0.000000)" id="Color">
<rect x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
<g id="Primary" transform="translate(-0.250000, -0.250000)">
<mask id="mask-4" fill="white">
<use xlink:href="#path-3"></use>
</mask>
<use id="Wave-Form" fill="#CF63CF" fill-rule="nonzero" xlink:href="#path-3"></use>
<g id="Magenta/1_Magenta" mask="url(#mask-4)" fill="#CF63CF">
<g transform="translate(0.250000, 0.250000)" id="Color">
<rect x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

src/components/sound-editor/icon--mute.svg
+18
View File
@@ -0,0 +1,18 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
<title>Sound/Effects/Mute</title>
<desc>Created with Sketch.</desc>
<defs>
<path d="M13.4541749,5.04815243 L15.6281168,2.87421054 C15.92101,2.58131732 16.3958837,2.58131732 16.688777,2.87421054 C16.9816702,3.16710376 16.9816702,3.64197749 16.688777,3.93487071 L4.53033009,16.0933176 C4.23743687,16.3862108 3.76256313,16.3862108 3.46966991,16.0933176 C3.1767767,15.8004244 3.1767767,15.3255506 3.46966991,15.0326574 L6.31214932,12.190178 C6.1241191,12.0621379 6,11.8463331 6,11.6029875 L6,8.6374875 C6,8.2471125 6.31941527,7.9276125 6.70968675,7.9276125 L7.02460322,7.9276125 C8.75776848,7.9276125 10.294111,6.8138625 10.8339678,5.1668625 C10.9295674,4.8743625 11.2017452,4.6774875 11.5076641,4.6774875 L12.8314379,4.6774875 C13.1002844,4.6774875 13.3341075,4.82717208 13.4541749,5.04815243 Z M13.54,9.08364771 L13.54,14.8531125 C13.54,15.2457375 13.2228341,15.5629875 12.8314379,15.5629875 L11.5076641,15.5629875 C11.2017452,15.5629875 10.9295674,15.3661125 10.8339678,15.0736125 C10.5773785,14.2908077 10.0956813,13.628465 9.47473531,13.1489124 L13.54,9.08364771 Z" id="path-1"></path>
</defs>
<g id="Sound/Effects/Mute" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Mask"></g>
<g id="Magenta/1_Magenta" mask="url(#mask-2)" fill="#CF63CF">
<rect id="Color" x="0" y="0" width="20" height="20"></rect>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

src/components/sound-editor/sound-editor.jsx
+39
View File
@@ -26,6 +26,9 @@ import louderIcon from './icon--louder.svg';
import softerIcon from './icon--softer.svg';
import robotIcon from './icon--robot.svg';
import reverseIcon from './icon--reverse.svg';
import fadeOutIcon from './icon--fade-out.svg';
import fadeInIcon from './icon--fade-in.svg';
import muteIcon from './icon--mute.svg';
const BufferedInput = BufferedInputHOC(Input);
@@ -99,6 +102,21 @@ const messages = defineMessages({
id: 'gui.soundEditor.reverse',
description: 'Title of the button to apply the reverse effect',
defaultMessage: 'Reverse'
},
fadeOut: {
id: 'gui.soundEditor.fadeOut',
description: 'Title of the button to apply the fade out effect',
defaultMessage: 'Fade out'
},
fadeIn: {
id: 'gui.soundEditor.fadeIn',
description: 'Title of the button to apply the fade in effect',
defaultMessage: 'Fade in'
},
mute: {
id: 'gui.soundEditor.mute',
description: 'Title of the button to apply the mute effect',
defaultMessage: 'Mute'
}
});
@@ -237,12 +255,30 @@ const SoundEditor = props => (
title={<FormattedMessage {...messages.softer} />}
onClick={props.onSofter}
/>
<IconButton
className={styles.effectButton}
img={muteIcon}
title={<FormattedMessage {...messages.mute} />}
onClick={props.onMute}
/>
<IconButton
className={styles.effectButton}
img={reverseIcon}
title={<FormattedMessage {...messages.reverse} />}
onClick={props.onReverse}
/>
<IconButton
className={styles.effectButton}
img={fadeOutIcon}
title={<FormattedMessage {...messages.fadeOut} />}
onClick={props.onFadeOut}
/>
<IconButton
className={styles.effectButton}
img={fadeInIcon}
title={<FormattedMessage {...messages.fadeIn} />}
onClick={props.onFadeIn}
/>
</div>
</div>
);
@@ -257,8 +293,11 @@ SoundEditor.propTypes = {
onChangeName: PropTypes.func.isRequired,
onContainerClick: PropTypes.func.isRequired,
onEcho: PropTypes.func.isRequired,
onFadeIn: PropTypes.func.isRequired,
onFadeOut: PropTypes.func.isRequired,
onFaster: PropTypes.func.isRequired,
onLouder: PropTypes.func.isRequired,
onMute: PropTypes.func.isRequired,
onPlay: PropTypes.func.isRequired,
onRedo: PropTypes.func.isRequired,
onReverse: PropTypes.func.isRequired,
src/containers/sound-editor.jsx
+3
View File
@@ -227,8 +227,11 @@ class SoundEditor extends React.Component {
onContainerClick={this.handleContainerClick}
onDelete={this.handleDelete}
onEcho={this.effectFactory(effectTypes.ECHO)}
onFadeIn={this.effectFactory(effectTypes.FADEIN)}
onFadeOut={this.effectFactory(effectTypes.FADEOUT)}
onFaster={this.effectFactory(effectTypes.FASTER)}
onLouder={this.effectFactory(effectTypes.LOUDER)}
onMute={this.effectFactory(effectTypes.MUTE)}
onPlay={this.handlePlay}
onRedo={this.handleRedo}
onReverse={this.effectFactory(effectTypes.REVERSE)}
src/lib/audio/audio-effects.js
+18 -1
View File
@@ -1,6 +1,8 @@
import EchoEffect from './effects/echo-effect.js';
import RobotEffect from './effects/robot-effect.js';
import VolumeEffect from './effects/volume-effect.js';
import FadeEffect from './effects/fade-effect.js';
import MuteEffect from './effects/mute-effect.js';
const effectTypes = {
ROBOT: 'robot',
@@ -9,7 +11,10 @@ const effectTypes = {
SOFTER: 'lower',
FASTER: 'faster',
SLOWER: 'slower',
ECHO: 'echo'
ECHO: 'echo',
FADEIN: 'fade in',
FADEOUT: 'fade out',
MUTE: 'mute'
};
class AudioEffects {
@@ -117,6 +122,18 @@ class AudioEffects {
({input, output} = new RobotEffect(this.audioContext,
this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
break;
case effectTypes.FADEIN:
({input, output} = new FadeEffect(this.audioContext, true,
this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
break;
case effectTypes.FADEOUT:
({input, output} = new FadeEffect(this.audioContext, false,
this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
break;
case effectTypes.MUTE:
({input, output} = new MuteEffect(this.audioContext,
this.adjustedTrimStartSeconds, this.adjustedTrimEndSeconds));
break;
}
if (input && output) {
src/lib/audio/effects/fade-effect.js
+27
View File
@@ -0,0 +1,27 @@
class FadeEffect {
constructor (audioContext, fadeIn, startSeconds, endSeconds) {
this.audioContext = audioContext;
this.input = this.audioContext.createGain();
this.output = this.audioContext.createGain();
this.gain = this.audioContext.createGain();
this.gain.gain.setValueAtTime(1, 0);
if (fadeIn) {
this.gain.gain.setValueAtTime(0, startSeconds);
this.gain.gain.linearRampToValueAtTime(1, endSeconds);
} else {
this.gain.gain.setValueAtTime(1, startSeconds);
this.gain.gain.linearRampToValueAtTime(0, endSeconds);
}
this.gain.gain.setValueAtTime(1, endSeconds);
this.input.connect(this.gain);
this.gain.connect(this.output);
}
}
export default FadeEffect;
src/lib/audio/effects/mute-effect.js
+22
View File
@@ -0,0 +1,22 @@
class MuteEffect {
constructor (audioContext, startSeconds, endSeconds) {
this.audioContext = audioContext;
this.input = this.audioContext.createGain();
this.output = this.audioContext.createGain();
this.gain = this.audioContext.createGain();
// Smoothly ramp the gain down before the start time, and up after the end time.
this.rampLength = 0.001;
this.gain.gain.setValueAtTime(1.0, Math.max(0, startSeconds - this.rampLength));
this.gain.gain.linearRampToValueAtTime(0, startSeconds);
this.gain.gain.setValueAtTime(0, endSeconds);
this.gain.gain.linearRampToValueAtTime(1.0, endSeconds + this.rampLength);
this.input.connect(this.gain);
this.gain.connect(this.output);
}
}
export default MuteEffect;