0

What I am trying to do is too download an audio file from a website. The audio file plays once you click the little earmuffs and it triggers a sound to play. I was wondering if it is possible to find and download the sound.

My attempt at trying to find it:

public void grabAudio()
    {
        string s = "http://pokedream.com/pokedex/pokemon/bulbasaur";

        HtmlWeb hw = new HtmlWeb();
        HtmlAgilityPack.HtmlDocument doc = hw.Load(s);

        var audio = doc.DocumentNode.SelectNodes("//div[@class='triggers']//img#pokecry-trigger")[0];
        if (doc.DocumentNode.SelectNodes("//div[@class='triggers']//img#pokecry-trigger")[0] != null)
        {
            //I have no idea what im doing :(
        }

    }

Picture of what I am trying to get and Link to website

Any and all help is appreciated :)

Simon Taylor
  • 503
  • 2
  • 7
  • 17
  • Please `PascalCase` your functions! It might seem a bit nitpicky, but please just follow the naming conventions. Don't program Java in C#... (I'm sorry, I just spazz out whenever I see someone `camelCase` them) – antonijn Mar 24 '13 at 10:31
  • The site probably uses javascript to attach a function to the click event of that element. – driis Mar 24 '13 at 10:32
  • In these type of issues using [fiddler](http://www.fiddler2.com/fiddler2/) is a great help... – rene Mar 24 '13 at 10:35
  • Have you seen this thread [How to download a file from a website in C#][1]? [1]: http://stackoverflow.com/questions/525364/how-to-download-a-file-from-a-website-in-c-sharp – Daniil Mar 24 '13 at 10:43

1 Answers1

3

First of all, if you don't have permissions from the site author to do this, you probably should not be doing it.

Now, if you do have the appropiate permission and a valid reason to do this; you can inspect the source and see that there are no apparent function attached to the image - and images do not play sound. So the functionality is likely controlled with JavaScript.

So, you start looking through the JavaScript, looking for stuff that attaches to the element of interest. You should find this code in pokedex.js:

$('#pokecry-trigger').click(function() {
    $('#pokecry').html('<embed src="/pokedex/images/cries/' + $('#identifier').text() + '.mp3" />');
  });

So when you click the image, an embedtag is added to the markup. Looking at the src tag, you can come to the conclusion that the files are in /pokedex/images/cries/<id>.mp3, where the site outputs the ID in a tag with the ID #identifier.

From there on you simply find the ID for each sound you need, and download it. This is done by downloading the HTML markup, finding the identifier DIV and inserting it into the URL template as called out above:

string id = "001"; // found in the markup
string url = String.Format("http://pokedream.com/pokedex/images/cries/{0}.mp3", id);
using(var cli = new System.Net.WebClient()) 
{
    var mp3Data = cli.DownloadData(url);
}
driis
  • 161,458
  • 45
  • 265
  • 341
  • Wow, such an amazing answer. Just one question, how did you conclude that "pokedex.js" was attached to the element? All in all thank you very much. – Simon Taylor Mar 24 '13 at 11:06
  • I simply searched the included js files for "pokecry-trigger", since that name sounded like something that would be used as a trigger :-) – driis Mar 24 '13 at 11:32