7

Is there a way to change the embed code or some JavaScript I can run in a blogger blog to embed only the audio of a YouTube video in my blog posts?

My specific situation: I have a private blog that I would like to record my musings to in audio form. I'm looking for a good solution for hosting the audio recordings and embedding them in my blog. My research has led me to believe that YouTube would be the best despite the fact that it is meant for video.

What I've tried: Everything online says that you just change the height of the embed code to be 25, but I think this is a hack and would like to avoid it if I can.

In case you're interested: Here are the things I've looked at and why I don't think they are suitable solutions for my problem:

  • Dropbox: Workable, but if I ever want to change the location of the files in my Dropbox then the links would all break (I presume). This is my current solution. I'm just using the <audio> tag which works great for me.
  • Google Drive: Doesn't have any streaming capabilities I'm aware of.
  • SoundCloud: Limit of two hours for free version and there's no way to make a clip "unlisted" so my blog can access it but the world can't.
  • Last.fm: Just won't work.

I'm open to other solutions, but this seems to be the best one. My criteria are:

  • Free and basically unlimited
  • Permanent links (this is why Dropbox is not a great solution)
  • Access only to those with a link, not searchable to the general public

Reiterating my question: Remember, I've done my research, so my question isn't which service I should use, but rather if there's a way to embed only audio from a YouTube clip. But I'm happy to accept alternatives. I just don't want to break the rules of the site :)

Improve this question
3
  • You could just show a static image as the video part, and record the audio only. The static image could be very bland e.g. solid color green. Would that work for your situation?
    – Ellie Kesselman
    Dec 29, 2012 at 7:16
  • 1
    I've thought about that as a solution, and that may be what I end up doing. If that's my solution I'll let you know so you can answer and get the rep points for it @FeralOink Thanks.
    – kentcdodds
    Dec 29, 2012 at 7:28
  • I have a WordPress plugin that uses the 25px height technique, but am planning to change it to use a pure Javascript YouTube API solution ( check the demo ). I don't know how blogger works, so cannot offer much more than this... Oh, I did research a lot on the matter too and ended up with YouTube, SoundCloud and The Internet Archive (not pretty at all, but does have its groove).
    – brasofilo
    Jan 25, 2013 at 22:35

2 Answers 2

Reset to default
1

It turns out that Google Drive does have streaming capabilities. And it doesn't change the URL for anything you move, so it's the perfect solution (aside from not having unlimited storage, but my use case doesn't require that, so I'm good). So my blog post jus consist of the following HTML:

Whatever I want to write here...<br />
<br />
<hr />
<audio controls="controls" style="margin-left: auto; margin-right: auto;">
  <source src="https://googledrive.com/host/DRIVE_ID_OF_FILE_GOES_HERE" type="audio/mpeg"></source>
  Your browser does not support the audio element.
</audio>
Improve this answer
0

The only work for the webmaster is to create (or find somewhere) PLAY and STOP icons.

Code:

<a href="http://www.youtube.com/embed/XXXXXXXXX?autoplay=1" target="sndtrk"><img src="http://yoursite.web/play.png" width="24" border="0"></a> 

<a href="nothing.html" target="sndtrk"><img src="http://yoursite.web/stop.png" width="24" border="0"></a>

<iframe name="sndtrk" width="0" height="0" src="http://www.youtube.com/embed/XXXXXXXXX?autoplay=1" frameborder="0">audio not available</iframe>

where:

"play.png" and "stop.png" are the icons.
"sndtrk" is the name of the frame, may be different

XXXXXXXXX is the YouTube video.
"nothing.html" is a non-existing or empty page.
iframe width and height is set to "0".

Improve this answer
2
  • Ouch, something swallowed the code, don't you allow html tags?
    – Abri Pix
    Aug 19, 2015 at 3:43
  • 1
    You need to indent your code. Check the help for the editor.
    – ale
    Aug 19, 2015 at 22:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.