Seeking help for audio in Map Journal Story Map

1087
6
Jump to solution
06-30-2017 05:35 AM
JosephKerski
Esri Notable Contributor

Hi Everyone:

 

My goal in making a story map right now is to play the AUDIO from some of my YouTube videos.  The code below works just fine - it links to a javascript file and the YouTube API accomplishes what I am seeking – Here is a sample page of how that works here: pixelright.com/joseph.htm  and below is the code that makes it work.

 

That’s all good and it works great!  … outside the story map.  But inside the story map, it looks like the graphic below ... it is not hyperlinked.  I feel I'm so close and just need to remove some of the DIV code but ... not sure what to change and I've tried it many times with many versions of the code below.  Thank you for any assistance!

 

This is what it looks like in the story map

 

CODE:

 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jjk</title>
<style type="text/css">
<!--
body { margin: 0; padding: 0; }
#wrapper {
margin: 100px auto;
text-align: center;
}
#youtube-audio img { width: 50px; }
body {
background-color: #fff;
}
-->
</style></head>

<body>
<div id="wrapper">
<div>This is audio playing from the YouTube video here: https://www.youtube.com/watch?v=yTT3hPVoCoY</div>
<div align="center">
<div data-video="yTT3hPVoCoY"
data-autoplay="0"
data-loop="1"
allowfullscreen="false"
height="250"
width="400"
id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
</div>
</div>
</body>
</html>

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
StephenSylvia
Esri Regular Contributor

Are you embedding the page into the map journal; your example page worked for me? Or are you trying to add the HTML directly to the map journal using the HTML editor in the text editor? For security reasons, we restrict certain tags from being added to the HTML, including those script tags: Supported HTML—ArcGIS Online Help | ArcGIS.

Feel free to stop by our booth next week at UC if you want help thinking about a good workflow.

View solution in original post

0 Kudos
6 Replies
StephenSylvia
Esri Regular Contributor

Hi Joseph, I'm not sure I understand what you're trying to do? Are you having trouble embedding your page with the sound? Here's a sample I made with your sample page it seams to work: http://testing-story.maps.arcgis.com/apps/MapJournal/index.html?appid=9d11cf75820d430c929f9aa370d6ed....

Or are you to get the URL to youtube be a clickable link? If that is the case, you'll need to add an anchor tag around the URL.

Here's another way to add audio to the Map Journal: https://developerscorner.storymaps.arcgis.com/using-the-html-audio-tag-in-your-story-map-f818d931625....

You might also use Sound Cloud instead of YouTube. They will host your audio and provide an embeddable audio only player. I created a second section in the test map journal I sent so you can see what it looks like.

JosephKerski
Esri Notable Contributor

Thank you Stephen!

What I was trying to do was link directly to the YouTube audio.  I can do this just fine on a web page outside of my story map, but inside my story map, I am not sure if I need to take some of the DIV lines out - but anyway, I cannot get it to work.  So, I am going with my Plan B for my Sounds of Planet Earth Story Map, which is to download my YouTube videos, separate the Audio and Video, place the Audio files online (I am using Archive.org now but yes, I also have a SoundCloud Channel), and link to the sounds online.  It is a ton more work because of all of the separation and processing required, so I was just trying to save some hours/days in my workflow.  But I've tried my Plan A a dozen times and now need to move on.  But thanks for your help!   It will be great when it is done and Plan B isn't so bad because I will have an archive of some of my key sounds as another deliverable.

--Joseph Kerski 

0 Kudos
StephenSylvia
Esri Regular Contributor

Are you embedding the page into the map journal; your example page worked for me? Or are you trying to add the HTML directly to the map journal using the HTML editor in the text editor? For security reasons, we restrict certain tags from being added to the HTML, including those script tags: Supported HTML—ArcGIS Online Help | ArcGIS.

Feel free to stop by our booth next week at UC if you want help thinking about a good workflow.

0 Kudos
JosephKerski
Esri Notable Contributor

I am going to have to bail on this one, folks, and go with Plan B - saving the audio and placing that on a site and linking to it.  It is a lot more work but I will accomplish my goal.  But someday I'd like to be able to link directly to audio from my videos.  Thank you.

--Joseph Kerski 

0 Kudos
JosephKerski
Esri Notable Contributor

Thanks Tim - this is very helpful indeed.  I am almost done with my Story Map of Sounds and will post it soon in the Education Blog zone on GeoNet. 

0 Kudos