gender-voice-visualization/ui/help.html

<style>
	.wide-body .mobile-help {
		display: none;
	}
	.mobile-help {
		font-size: smaller;
		font-style: italic;
	}
	.wide-body .mobile-help + p {
		margin-top: 0px;
	}
	.help details + details {
		margin-top: .5em;
	}
	.help .notice {
		text-align: center;
		margin-bottom: 0px;
		font-weight: bold;
	}
	.notice + h2 {
		margin-top: 0px;
	}
</style>
<section class="help">
	<!--p class='notice'>Help us out! Answer 
	<a href="https://brown.co1.qualtrics.com/jfe/form/SV_4PgW7EKNvnxnWLk">our survey</a>.
	</p-->
	<h2>Tutorial</h2>

	<div class='mobile-help'>
	Mobile users: You can tap the top edge of this pane
	to expand/collapse it for easier reading.
	</div>

	<p>
	<img src="resources/logo.png" alt="An acoustic guitar where the headstick is semi-triangular forming a Mars-sign along with the neck and sound hold. Likewise, the sound hole, strings, and bridge form a Venus sign. The image is in the pink, blue, and white transgender pride colors." style="float: right" width='128'/>
	This app visualizes the pitch and resonance of voices in recordings over time.
	<strong>Pitch</strong> is our perception of the frequency at which the vocal folds vibrate.
	<strong>Resonance</strong> is the effect exerted on a sound by the passage the air travels through.
	The program plots recordings in a <strong>2-dimensional space</strong>,
	where the Y-axis represents pitch,
	and the X-axis represents resonance,
	with brighter sounds represented with a higher percentage.
	</p>
	

	<p>Typically, voices perceived as female have brighter resonance and higher pitch (top right),
	while those perceived as male have darker resonance and lower pitch (bottom left).
	These features can be blended in different degrees
	to create a <strong>broad spectrum</strong> of perceptual and aesthetic qualities related to gender.
	There are no sharp cutoffs at which a voice is 
	guaranteed to be gendered a specific way,
	just as the colors in the graph blend seamlessly into one another.

	<p>Press the <strong>play button</strong> in the top-left corner of the app to play the clip
	associated with the selected point on the graph.
	Examine some of the provided examples to get a sense
	of how positions on the graph correspond to your perceptions of gender.
	(Note: Example clips may take some time to show up on slow connections).
	You can visualize your own recordings by pressing the <strong>add clip button</strong>
	in the top-right and submitting a recording.
	It will take some time to process,
	so you may wish to examine the other clips while the recording is processed.

	<p>Your clips are sent to our server for processing,
	but they are <strong>not stored persistently</strong>.
	You can save the sound file from your recording
	using the <strong>download button</strong> in the "Details" tab.
	From the settings tab,
	you can also <strong>export</strong> all of your data in a single file
	which can be imported for viewing at another time.
	Otherwise, your data will be lost when you exit the page.

	<p>We hope that using this program will help you understand how voices are gendered
	and assess your own progress if you are trying to alter your voice
	to better match your gender identity or desired presentation. Good luck!

	<h2>FAQ</h2>
	<details>
		<summary>Why does the marker move around so much even when I'm not changing my voice drastically?</summary>
		<p>Most speech has a broad range of values in pitch and resonance,
		e.g. The highest and brightest phone spoken in a sample of typical male speech
		may well be similar in pitch in resonance to the <em>average</em> phone in typical female speech.
		Our perception of a voice is based on the overall tendencies within speech
		rather than the moment-to-moment features of individual phones.</p>
	</details>
	<details>
		<summary>Why do all the markers start so close together?</summary>
		<p>When not playing, the markers are displayed at the median values across the whole clip.
		Because there's a wide range of values in most speech,
		this pushes the median towards the center.
		However, a small change in median values
		can have a big influence on how a voice is gendered</p>
	</details>
	<details>
		<summary>Does this program support languages other than English?</summary>
		<p>Not currently. 
		If you add recording in another language, 
		you <em>might</em> get an output,
		but it will probably not be very accurate.</p>
	</details>
	<details>
		<summary>Do accent and dialect affect pitch and resonance?</summary>
		<p>Yes, so you may wish to upload recordings of other speakers with your accent or dialect
		to better compare with your own voice.</p> 
	</details>
	<details>
		<summary>Ok, I can see my resonance now, but how do I actually change it?</summary>
		<p>There are several ways. One is to raise (brightening) or lower (darkening) your larynx.
		Your larynx raises when you swallow and lowers when you yawn.
		You may be able to feel it move if you put your hand over the front of your neck
		while you make one of these movements.
		If you can learn to control your larynx position in normal speech,
		it can have a big effect on your resonance.
		</p> 
		<p>
		Your resonance is also affected by the space in your mouth.
		Holding your tongue higher in your mouth as you speak will brighten your resonance,
		and holding it lower will darken it.
		</p>
	</details>
	<details>
		<summary>Even though my pitch and resonance seem to be in the right spot,
		I don't feel like my voice sounds like I want it to.</summary>
		<p>There are many dimensions to voice other than pitch and resonance,
		so you might need to target other features.
		You might also be straining to reach a particular point,
		which can be audible to a listener.
		It might help to pick a less extreme target
		which you can reach comfortably.</p>
	</details>
	<details>
		<summary>Can I donate to encourage further development?</summary>
		<p>Yes! You can donate through any of the following platforms:</p>
		<ul>
			<li><a href="https://liberapay.com/lmcnulty">Liberapay</a> - Recurring donations, no extra fees, free-software focus
			<li><a href="https://ko-fi.com/lmcnulty">Ko-fi</a> - One-time or recurring donations, no extra fees 
			<li><a href="https://www.patreon.com/lmcnulty">Patreon</a> - Recurring donations, takes a cut
		</ul>
	</details>

	<h2>Credits</h2>
	<p>This application is developed by <a href="https://lmcnulty.me">Luna McNulty</a>
	as part of a research project for her Sc. M. program at Brown University.
	Its content is available under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
	and uses Creative-Commons-licensed sound files from
	Morgan and Christine Lemmer-Webber's podcast <a href="https://fossandcrafts.org">Foss and Crafts</a>
	as well as public domain content audiobook content from <a href="librivox.org">Librivox</a>.</p>
</section>