Podcast audio player issue

[George Sargent]

Bill,
I’m using localhost to get the site working and I’m trying to host my sermon audio files remotely on Google drive. If I upload the audio files to WordPress, they play using the regular audio widget as expected. But, when I simply change the URL to an audio file hosted on Google drive, the page displays a hyperlink instead of the audio player widget. Clicking the hyperlink does play the file on a new page, but of course I want it to use the widget to play the file. The example links follow:

Local link: http://localhost:8888/smach/wp-content/uploads/2015/01/2015-01-04_sermon.mp3
Google link: https://www.googledrive.com/host/0B2Yrz1VMMokFcVFGWXU5RkpzU3M

The permissions on the Google drive files are set to public.

Any ideas?

George

Attachments:

1. 

   PodcastAudioInsideWordpress.png
   

2. 

   PodcastAudioHostedGoogleDrive.png
   

[Bill Robbins]

Hey George,

Good question. The link Google Drive provides is to a web page vs. the actual file URL. In order to work properly, the URL needs to be ending in an extension like .mp3, otherwise it’s probably a web page.

DropBox will give you a public link for any file in a public directory just by right clicking it. I don’t Google makes it as simple with their system.

I did find a post at http://stackoverflow.com/questions/11054878/is-is-possible-to-get-a-permanent-url-to-a-file-uploaded-to-google-drive that appears to offer a few suggestions on how to find the URL directly to the file.

If I can help out, let me know.

Have a great weekend,
Bill

[George Sargent]

Bill,

Still having problems. I switched to Dropbox to see if it helped. The answer is not really. I’ve done the following:

1. placed the mp3 files in my Dropbox Public folder,
2. clicked the share button and then copied the “link to file” textbox field to get the URL of the audio file. It ends in mp3. It’s shared to “anyone with the link”.
3. Then I pasted the copied URL string into the Kerygma “Message Audio File” field. I have not clicked he Add or Upload File” button, as this seems to be a file picker for the WordPress Media library and my file is on Dropbox.

When the web page is viewed it shows the player and it looks normal but doesn’t work when the play button is clicked. The Play button logo does change to a Pause logo, but no sound comes.

I also put a shortcode for the audio player onto the page using the exact same URL string. the code looks like:

<p> Before George's audio shortcode:</p>
[audio src="https://www.dropbox.com/s/hz4gfoqz0lg2hsv/2015-01-04_sermon.mp3]
<p>After George's shortcode</p>

You can see in the attached image that the shortcode generates the same sized area but doesn’t look like an audio player, instead it contains the words ‘Download File’. When clicked, however, the shortcode generated player opens a new black page containing a centered audio player which immediately begins to play the audio. So, the URL to the file seems to work, but I’m baffled.

Might permissions be wrong somewhere? Remember, I’m doing this on a desktop as localhost running the opensource mamp server package.

Thanks in advance for your help!

George

Attachments:

1. 

   twoPlayers1.png
   

2. 

   PodcastFiles-control-fields.png
   

[Bill Robbins]

Hey George,

I tried a couple more things. I uploaded a MP3 from my church and yours to my Dropbox account to see if I could stream from them into my local development site. Both worked that way. Here’s the URL for each:

[audio src="https://dl.dropboxusercontent.com/u/6160765/Random%20Files/2015-01-04_sermon.mp3" /]
[audio src="https://dl.dropboxusercontent.com/u/6160765/Random%20Files/Good%2BFriday.mp3" /]

But when I tried this one from earlier: https://www.dropbox.com/s/hz4gfoqz0lg2hsv/2015-01-04_sermon.mp3 it did not.

I just realized that I use Finder on my Mac (the built in file browser) to get my DropBoxy URL’s. The DropBox app adds a right click menu section so that if I right click on a file in my DropBox, it will give me the file URL.

It looks like the URL is different between the web and Finder. This is the URL the web gives me:
https://www.dropbox.com/s/dqw67dl6d9yt4xb/2015-01-04_sermon.mp3?dl=0

It’s totally different and doesn’t work. I think even though it ends in MP3, the DropBox web app adds a player in so that someone going to that URL can actually listen to the file or download it.

If you can, try getting the file URL locally on your computer and not via DropBox’s web app and see if that works.

We’re getting there,
Bill

[George Sargent]

Bill,

I owe you one. I got it working with your help. I find that both DropBox and Google Drive work as remote hosts. Why and how to reference them may be useful to someone else so I’ve tried to define the process for DropBox and Google Drive.

To begin with, I can’t imagine it is a good, or even acceptable, practice to store media files, such as sound recordings in the WordPress database. And if I understand it right, that’s where they are stored. I see that your media files for the Kerygma sample data are stored in Amazon S3 instead of WordPress.

As you pointed out, DropBox gives a usable URL by simply Right-clicking the local copy in the finder under DropBox and selecting “Copy Public Link”. As you said, doing a similar thing from the DropBox Browser window doesn’t give the same, or usable, result. However, I have read that DropBox isn’t meant to be a Web server and there could be consequences.

The URL for the 2015-01-04_sermon.mp3 file is:
[audio src="https://dl.dropboxusercontent.com/u/1681288/wordpress_media/2015/2015-01-04_sermon.mp3" /]

Google Drive is an alternative to DropBox and is familiar to many people as it too has a desktop user interface. Google Drive is a file server and also can give up a URL to reference a file although it is a little more cumbersome than DropBox, and the URL is pretty ugly. But it works.

The Google Drive URL is in this form:
http://googledrive.com/host/<folder ID>/<filename>

To get the <folder ID> find the desired folder your file is in, or a parent folder, go to Google Drive in your Web Browser, right-click the base folder and select the ‘Share…’ context menu. Make sure it’s Public (Anyone on the internet can find and view) and copy its URL. It’s really, really long because the ID portion of it is huge. Past the URL into an editor, e.g. TextEdit on a MAC or Notepad on Widows. Then the Google Drive URL is in this form:

http://googledrive.com/host/<folder ID>/<filename>

The good news is that only the <filename> portion of the URL should change with each new file stored in Google Drive. That should make it easier, but its still ugly.

My <folder ID> looks like: 0B2Yrz1VMMokFflZndFVzM2t1OTd1bG8wUHVHQ0RkbmZ2dXF1d2VhMllzUV9iajN3NkRhMgg

The <filename> is just the regular filename or path and filename from the base folder. You can see in the attached image that the base folder is ‘WordPress_media’. My file is in a sub-folder, so the path and filename are:

audio/2015/2015-01-04_sermon.mp3

So, both DropBox and Google Drive work. You are using S3. Do you have a recommendation, or should we just be storing things in the default WordPress database?

Attachments:

1. 

   fileURL2.png
   

2. 

   GoogleURL1.png
   

3. 

   GoogleURL2.png
   

[George Sargent]

This reply has been marked as private.

[Bill Robbins]

George,

Thanks for the detailed information. Since our discussion this week, I’ve been intending to write a blog post about using DropBox and Google Drive with podcasting. This helps out tremendously.

Incidentally, WordPress doesn’t store media files (video, audio, images, PDF’s and the like) in the database. They store information about them there as well as the written content of your pages, posts, widget and other types of settings.

If you have FTP access to your server, you can download the wp-content/uploads folder which will have all of the individual files in it for you to use and backup.

I do use Amazon’s S3 for storage some. My web host counts visitors to my site as a unique IP address accessing something of mine on their servers on a daily basis. I was consistently running over my allotment and looking for ways to fix that so I started moving some of the demo content to S3.

It turned out it was the update requests for themes that was driving the overages so much, so I moved the support site to a different company and that took care of that.

Thanks for the offer to pay, but you’ve done a great service in getting into all the details for us. That’s more than generous of you already.

Have a great weekend,
Bill

[Author]

Posts