How do I get the location of the original audio/video file embedded on a webpage?

  • Some sites like The Free Dictionary, and many other translation and pronunciation services, offers a little icon next to the word so you could hear its pronunciation.

    How can I figure out the source for an audio\video embedded file on a webpage? Where do I start?

  • samuirai

    samuirai Correct answer

    7 years ago

    When you create a website and you embed images, videos, audio, javascript or other external sources, you specify their location by an own URL too.

    For example you have this directory structure on your server, which resolves to the following accessible URLs (asuming your website is www.example.com):

    |-- /index.html                ->  www.example.com/index.html
    |-- /images/                   ->  www.example.com/images/
    |    |-- /banner.png           ->  www.example.com/images/banner.png
    |    +-- /icons/               ->  www.example.com/icons/
    |         +-- favicon.png      ->  www.example.com/icons/favicon.png
    +-- /audio/                    ->  www.example.com/audio/
        |-- intro.mp3              ->  www.example.com/audio/intro.mp3
        +-- voice.flac             ->  www.example.com/audio/voice.flac
    

    When you access index.html your browser will look for all the other embedded URLs and will get them from the server too. You can use tools like Firebug for Firefox or the Chrome Developer Console to capture the requests. One of those requests should be the URL to the media file.

    If you have an HTML <embed> tag (or a <img> tag), the URL to that media is specified by the src attribute, which can be also examined with tools like Firebug or the Chrome Developer Console. You can make a rightclick->Inspect Element anywhere on the page and examine the HTML.

    <embed src="/audio/intro.mp3">   -> www.example.com/audio/intro.mp3
    

    Yes, in Chrome or IE you can press `F12` to bring up the Developer Tools window (in Firefox as well if you have Firebug installed). In the Developer Tools window, go to the Network view, click on the speaker icon on the target page, and for the example you posted above you'll see the following URL appear in the list of requests in the Network view: http://img.tfd.com/hm/mp3/H0004900.mp3

    An alternative is to go to the Elements view in the Developer Tools window, select the speaker icon on the page for inspection, and you'll see in the Elements view: `

  • Another way to find url with audio file is check get requests by Developer Tools in Chrome browser:

    enter image description here

    Which browser are you using?

    Chrome browser.

    Of particular note there is the "Copy as cURL", which will give you the full curl command to exactly reproduce the HTTP request. This can be helpful if the site checks user agents / referers / cookies etc.

  • Nowadays webpages commonly uses players written with Javascript, so you need a little html and js knowledge to dig out and use some web development tools like others mentioned

    But there is an easier way of doing this. You can just use an app like Internet Download Manager (IDM) which offers to download any kind of multimedia file on playing on a browser. It supports all audio video playing websites like Youtube, Grooveshark etc. Its shareware but you can make this operation with trial version too.

    Install the application and restart your browser. It supports Firefox, Chrome, Opera, IE, Safari etc.

    When you play the file on the page you will see an icon on the left top of the window

    Download Audio

    After you click icon you will see the download file info window which has file url and other information. You can copy and use file name part of the url. Usually it has a pattern and you can guess or find paths of other files.

    Download File Info Dialog

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM