Step 12

Let's update the Phonetics.js as follows.

function Phonetics() {
  return (
    <>
      <section class="section is-medium pt-0 pb-6" id="phonetics">
        <h1 class="title">Phonetics</h1>
        <article class="message is-medium">
          <div class="message-header">/həˈloʊ/</div>
          <div class="message-body">
            <audio controls style={{width: "100%"}}>
              <source
                src="https://lex-audio.useremarkable.com/mp3/hello_us_1_rr.mp3"
                type="audio/mpeg"
              />
              Your browser does not support the audio element.
            </audio>
          </div>
        </article>

        <article class="message is-medium">
          <div class="message-header">/hɛˈloʊ/</div>
          <div class="message-body">
            <audio controls style={{width: "100%"}}>
              <source
                src="https://lex-audio.useremarkable.com/mp3/hello_us_2_rr.mp3"
                type="audio/mpeg"
              />
              Your browser does not support the audio element.
            </audio>
          </div>
        </article>
      </section>
    </>
  );
}

export default Phonetics;

Here is the updated app:

Notice the output of the Phonetics component is taken from the index.html of the original dictionary app. It contains duplicate code as there are two pronunciations for the word "Hello." We can refactor the code by separating the data from the layout.