{"id":75882,"date":"2018-09-26T12:08:46","date_gmt":"2018-09-26T19:08:46","guid":{"rendered":"https:\/\/www.esri.com\/about\/newsroom\/?post_type=arcwatch&#038;p=75882"},"modified":"2018-10-18T15:08:20","modified_gmt":"2018-10-18T22:08:20","slug":"add-audio-to-your-esri-story-map-tour-app","status":"publish","type":"arcwatch","link":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app","title":{"rendered":"Add Audio to Your Esri Story Map Tour App"},"content":{"rendered":"","protected":false},"author":651,"featured_media":0,"menu_order":0,"template":"","format":"standard","meta":{"_acf_changed":false,"sync_status":"","episode_type":"","audio_file":"","castos_file_data":"","podmotor_file_id":"","cover_image":"","cover_image_id":"","duration":"","filesize":"","filesize_raw":"","date_recorded":"","explicit":"","block":"","itunes_episode_number":"","itunes_title":"","itunes_season_number":"","itunes_episode_type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[81],"tags":[271,1281],"arcwatch_issues":[43022],"class_list":["post-75882","arcwatch","type-arcwatch","status-publish","format-standard","hentry","category-capability","tag-mapping","tag-visualization","arcwatch_issues-october-2018","arcwatch_sections-the-tip"],"acf":{"short_description":"Esri technology evangelist Bern Szukalski shows you how to add audio files to Story Map Tour apps. ","pdf":{"host_remotely":false,"file":null,"file_url":""},"flexible_content":[{"acf_fc_layout":"content","content":"When you want to present a sequential, place-based narrative that features images or videos, the <a href=\"http:\/\/storymaps.arcgis.com\/en\/app-list\/map-tour\/\">Esri Story Map Tour<\/a> app is an excellent choice. Viewers can click through each tour point in sequence or explore the tour by using the map or optional thumbnail carousel. You also can add audio recordings to your Story Map Tour app to enhance the storytelling experience, which you will learn how to do in the tip below.\r\n\r\nThe City of Bellingham, Washington, created the <a href=\"https:\/\/www.iqmap.org\/storymaps\/MapTour_hist\/index.html?appid=dbabd7063f144a2682afddbb8cbc9c14\">Downtown Historic Walking Tour<\/a>. It uses audio to enrich the story with information about the buildings and other features along a walking route."},{"acf_fc_layout":"image","image":71962,"image_position":"left-center","orientation":"horizontal","hyperlink":"https:\/\/www.iqmap.org\/storymaps\/MapTour_hist\/index.html?appid=dbabd7063f144a2682afddbb8cbc9c14"},{"acf_fc_layout":"content","content":"Note that many of the tour stops include an audio control. Click it to learn more about the location:"},{"acf_fc_layout":"image","image":71972,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Another Story Map Tour app that includes audio is the <a href=\"http:\/\/roseville.maps.arcgis.com\/apps\/MapTour\/index.html?appid=538e911fca7844c8881a6a600a7ce767\">Historic Roseville Walking Tour<\/a>, created by the City of Roseville, California."},{"acf_fc_layout":"image","image":71982,"image_position":"left-center","orientation":"horizontal","hyperlink":"http:\/\/roseville.maps.arcgis.com\/apps\/MapTour\/index.html?appid=538e911fca7844c8881a6a600a7ce767"},{"acf_fc_layout":"content","content":"To add an audio file to your own Story Map Tour app, follow the steps below. In this example, you will learn how to add an audio file to a stop in one of your existing tours. To learn how to create a tour, visit the Story Map Tour web page and click <strong>BUILD A MAP TOUR<\/strong>. You will need an <a href=\"https:\/\/www.arcgis.com\/index.html\">ArcGIS Online<\/a> organizational account or an ArcGIS public account.\r\n\r\n<strong>Step 1.<\/strong> Open your map tour in builder mode.\r\n\r\nClick\u00a0<strong>Edit<\/strong>\u00a0in the upper right-hand side of the application. Note that this functionality is available only if you are the map tour owner."},{"acf_fc_layout":"image","image":71992,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 2. <\/strong>Add the audio file to the desired tour stop.\r\n\r\nA good place to add an audio control is the tour stop caption so that it appears below the text, as seen in the example tours above. Advance to the desired tour stop, then click to edit the picture caption. The appearance of the caption editing panel will depend on which layout you have selected, but adding audio works the same way no matter which layout you have chosen."},{"acf_fc_layout":"image","image":79902,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 3. <\/strong>Add the markup necessary to add the audio file.\r\n\r\nStore the audio file at a publicly accessible URL location. The sample used here is an MP3 file stored on a server.\r\n\r\nhttp:\/\/downloads.esri.com\/agol\/labs\/maptour\/horse.mp3"},{"acf_fc_layout":"sidebar","layout":"code_snippet","image_reference":null,"image_reference_figure":"","spotlight_image":null,"section_title":"","spotlight_name":"","position":"Center","content":"The markup used to display the audio control is as follows:","snippet":"<audiocontrols>\r\n<sourcesrc=\"http:\/\/downloads.esri.com\/agol\/labs\/maptour\/horse.mp3\"\r\ntype=\"audio\/mpeg\"> \r\n<\/audio>"},{"acf_fc_layout":"content","content":"Add a couple of line breaks (&lt;br&gt;) to ensure that there is adequate space between the caption text and the audio control. The edited caption appears in the image below, with the HTML shown above inserted into the caption area:"},{"acf_fc_layout":"image","image":79912,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<strong>Step 4<\/strong>. Save your map tour, then view and listen to it.\r\n\r\nSave your work; the tour stop caption has now been enhanced to include the audio control."},{"acf_fc_layout":"image","image":79892,"image_position":"left-center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"Remember that audio is best when used sparingly. Like spice added to food, too much can ruin your efforts, but a pinch here and there can bring out the story's flavor. Keep your audio clips short and to the point.\r\n\r\nNote that audio files may not play in all versions of browsers or on all devices. To learn more about embedding sounds, see the\u00a0<a href=\"https:\/\/www.w3schools.com\/tags\/tag_audio.asp\">w3Schools website<\/a>\u00a0referenced for this example.\r\n\r\nVisit the\u00a0<a href=\"http:\/\/storymaps.arcgis.com\/en\/\">Story Maps web page<\/a> for more information, or view the help provided within the Story Map Tour builder. The Story Maps Gallery contains\u00a0<a href=\"http:\/\/storymaps.arcgis.com\/en\/gallery\/#s=0&amp;q=audio\">other examples<\/a>\u00a0of story maps that use audio."}],"references":null},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Add Audio to Your Esri Story Map Tour App<\/title>\n<meta name=\"description\" content=\"Learn how to add audio files to Esri Story Map Tour apps.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add Audio to Your Esri Story Map Tour App\" \/>\n<meta property=\"og:description\" content=\"Learn how to add audio files to Esri Story Map Tour apps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app\" \/>\n<meta property=\"og:site_name\" content=\"Esri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2018-10-18T22:08:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/tip-audio-banner.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@Esri\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t    \"@context\": \"https:\/\/schema.org\",\n\t    \"@graph\": [\n\t        {\n\t            \"@type\": \"WebPage\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app\",\n\t            \"name\": \"Add Audio to Your Esri Story Map Tour App\",\n\t            \"isPartOf\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\"\n\t            },\n\t            \"datePublished\": \"2018-09-26T19:08:46+00:00\",\n\t            \"dateModified\": \"2018-10-18T22:08:20+00:00\",\n\t            \"description\": \"Learn how to add audio files to Esri Story Map Tour apps.\",\n\t            \"breadcrumb\": {\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app#breadcrumb\"\n\t            },\n\t            \"inLanguage\": \"en-US\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"ReadAction\",\n\t                    \"target\": [\n\t                        \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app\"\n\t                    ]\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"BreadcrumbList\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app#breadcrumb\",\n\t            \"itemListElement\": [\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 1,\n\t                    \"name\": \"Home\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 2,\n\t                    \"name\": \"ArcWatch Articles\",\n\t                    \"item\": \"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\"\n\t                },\n\t                {\n\t                    \"@type\": \"ListItem\",\n\t                    \"position\": 3,\n\t                    \"name\": \"Add Audio to Your Esri Story Map Tour App\"\n\t                }\n\t            ]\n\t        },\n\t        {\n\t            \"@type\": \"WebSite\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#website\",\n\t            \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/\",\n\t            \"name\": \"Esri\",\n\t            \"description\": \"Esri Newsroom\",\n\t            \"potentialAction\": [\n\t                {\n\t                    \"@type\": \"SearchAction\",\n\t                    \"target\": {\n\t                        \"@type\": \"EntryPoint\",\n\t                        \"urlTemplate\": \"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}\"\n\t                    },\n\t                    \"query-input\": {\n\t                        \"@type\": \"PropertyValueSpecification\",\n\t                        \"valueRequired\": true,\n\t                        \"valueName\": \"search_term_string\"\n\t                    }\n\t                }\n\t            ],\n\t            \"inLanguage\": \"en-US\"\n\t        },\n\t        {\n\t            \"@type\": \"Person\",\n\t            \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/2bb97f36f9a6288b8306552020a42541\",\n\t            \"name\": \"Rick Schneblin\",\n\t            \"image\": {\n\t                \"@type\": \"ImageObject\",\n\t                \"inLanguage\": \"en-US\",\n\t                \"@id\": \"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/\",\n\t                \"url\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg\",\n\t                \"contentUrl\": \"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg\",\n\t                \"caption\": \"Rick Schneblin\"\n\t            },\n\t            \"url\": \"\"\n\t        }\n\t    ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Add Audio to Your Esri Story Map Tour App","description":"Learn how to add audio files to Esri Story Map Tour apps.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app","og_locale":"en_US","og_type":"article","og_title":"Add Audio to Your Esri Story Map Tour App","og_description":"Learn how to add audio files to Esri Story Map Tour apps.","og_url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app","og_site_name":"Esri","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-10-18T22:08:20+00:00","og_image":[{"url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2018\/09\/tip-audio-banner.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@Esri","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app","url":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app","name":"Add Audio to Your Esri Story Map Tour App","isPartOf":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/#website"},"datePublished":"2018-09-26T19:08:46+00:00","dateModified":"2018-10-18T22:08:20+00:00","description":"Learn how to add audio files to Esri Story Map Tour apps.","breadcrumb":{"@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch\/add-audio-to-your-esri-story-map-tour-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/about\/newsroom"},{"@type":"ListItem","position":2,"name":"ArcWatch Articles","item":"https:\/\/www.esri.com\/about\/newsroom\/arcwatch"},{"@type":"ListItem","position":3,"name":"Add Audio to Your Esri Story Map Tour App"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/about\/newsroom\/#website","url":"https:\/\/www.esri.com\/about\/newsroom\/","name":"Esri","description":"Esri Newsroom","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/about\/newsroom\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/2bb97f36f9a6288b8306552020a42541","name":"Rick Schneblin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/about\/newsroom\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg","contentUrl":"https:\/\/www.esri.com\/about\/newsroom\/app\/uploads\/2017\/06\/RickS-150x150.jpg","caption":"Rick Schneblin"},"url":""}]}},"sort_order":"2","_links":{"self":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/75882","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch"}],"about":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/types\/arcwatch"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/users\/651"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch\/75882\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/media?parent=75882"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/categories?post=75882"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/tags?post=75882"},{"taxonomy":"arcwatch_issues","embeddable":true,"href":"https:\/\/www.esri.com\/about\/newsroom\/wp-json\/wp\/v2\/arcwatch_issues?post=75882"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}