Spice up Google Earth Projects with Custom HTML

One of the most requested features I get asked about is adding narration or audio to Google Earth Projects. Recently, I was fortunate to participate in a Google for Good 2020 session were Jordon Mears and I discussed how to approach adding audio to Google Earth Projects via Earth’s custom HMTL option. (Click here to watch full presentation – Free on-demand)

Click here to watch full presentation – Free On-Demand

Thanks for those who watched the session. However, as an educator, I understand the need to offer a non-serial version and examples of our 15-minute conversation.

Resources:

Code Editor: Visual Studio Code (Code editor from session) https://code.visualstudio.com/

Hosted MP3 file: https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3

HTML Templates: https://github.com/geteach/geteachGeology/tree/master/eGEW

Google Earth Project Example Link (Feel free to make a copy)

Step 1: Start simple

For me, when working with HTML and Google Earth, starting with the most basic snippet, then working up, saves hours of development time.

Our inquiry begins with…Can HTML audio tag work in Google Earth Web?

Finding the simplest code example often starts with Google search, “html Audio.” These searches often lead me to school. https://www.w3schools.com/html/html5_audio.asp

From here, I will take their “Try it Yourself” snippet and replace their mp3 with one of my own.

<!DOCTYPE html>
<html>
<body>

<audio controls>
  <source src="https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>

Copy and Paste the modified code into Google Earth Web and hear it work.

Simple HTML Audio – Google Earth Web

Step 2: Spice it up!

Now that we know the html audio tag works, we can spice up the style of the page with a little more HTML, CSS, and simple JavaScript. You can always create your own, but if you don’t have the time, feel free to use a template from this GitHub repository (https://github.com/geteach/geteachGeology/tree/master/eGEW). The snippet below is using the oneImageAudio.html example found in repository.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Simple Audio with One Image</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500|Roboto+Slab|Material+Icons" type="text/css" />
        <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue_grey-blue.min.css" />
        <link rel="stylesheet" href="https://geteach.com/gti/drp/scripts/egew.css" type="text/css" />
    </head>
    <body>
        <div id="container">
            <main class="panelMain">
                <div class="mediaContain">
                    <div class="slideshow-container">
<!--First media in Carousel--Best Image Aspect Ratio 3:2 Replace Image Source (src) bellow-->
                        <div class="mySlides fade">
                            <img class="image"src="https://storage.googleapis.com/geteachkml4/seafloorage/seafloor480.jpg">
                            <div class="captionDiv">
                                <div class="caption" >Replace Caption</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content" id="content">
<!--Replace title text between div-->
                    <div class="title">
                        Replace title
                    </div>
<!--Replace mp3 source (src="youraudio.mp3")-->
                    <audio id="audioI" style="display:none" >
                        <source src="https://storage.googleapis.com/geteachkml4/Sound_Effects_Applause.mp3" type="audio/mpeg">
                            Your browser does not support the audio tag.
                    </audio>
                    <span class="mdl-chip mdl-chip--contact audioPlay" style="width:85px;margin-left: 8px;">
                        <span class="mdl-chip__contact mdl-color-text--white" style="margin-right: 5px;"id="playIcon">
                            <i class="material-icons">play_arrow</i>
                        </span>
                        <span class="mdl-chip__text" id="playButton">Play</span>
                    </span>
<!--Replace text for description--Every <p> needs to have a class="text"--Any html works-->
                    <div class="description">
                        <p class="text">Replace description...If you need a new paragraph the class="text"</p>
                    </div>
                </div>
<!--Best image height for footer is 24px with a max-width of 145px-->
<!--If you don't want the footer is it best to delete the html within the logoLeft/LogoRight Div-->
                <div class="footer">
                    <div class="logoLeft">
                        <a href="https://twitter.com/geteach" target="_blank">
                            <img src="https://storage.googleapis.com/geteachkml4/logogeteachtemp.png" >
                        </a>
                    </div>
                    <div class="logoRight" style="display:none">
                    </div>
                </div>
            </main>
        </div>
    </body>
    <script src="https://geteach.com/gti/drp/scripts/egew0521.js"></script>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</html>

Custom HTML Audio – Google Earth Web

There are several HTML files in the repository for you to use, modify, or recreate. You can reach me @geteach on twitter if you need help exploring, creating, or sharing this Earth.

Read more about my Google Geo fun here: Decade of Google Geo EDU (https://geteach.com/blog/2020/01/26/decade-of-google-geo-edu/)

Or read some other Google Geo post here: https://geteach.com/blog