Skip to main content

Embed an audio player in html

Image
By
I just figured out how to do a neat thing in eCollege. First of all, the setting is that my SME was referring students to an external page (via a simple hyperlink) in order for them to listen to a podcast so as to complete the assignment. One problem (of many) was that the actual podcast was at the bottom of a very cluttered and disorganized page. So I downloaded the podcast and cleaned it up in Audacity (there was an ad at the very beginning), then I uploaded the mp3 in the course. I could have just linked students to the content within the course, which would have allowed them to download it, but I wanted to find a way for students to actually listen to it on the spot. This audio was actually in a discussion forum, so students listen to the podcast, respond, and then post replies to classmates. Now I will walk you through how I managed to embed the player. First of all, I assume that you know how to upload content into the course. Create a hyperlink to the content (Author > Add a Link > Link to File or Content > point to the content and add linked text). The purpose for creating the hyperlink is to get the html path of the content. In my case it looked like: http://threadcontent.next.ecollege.com/CurrentCourse/podcast.mp3 It will be whatever is in between the quotation marks within the href anchor tag. I chose to embed a QuickTime Player, just because it is much simpler and most people have QuickTime, whereas Mac users may not have media player. Here is my code: http://threadcontent.next.ecollege.com/CurrentCourse/podcast.mp3" type="video/quicktime" autoplay="true" controller="true" loop="false" height="50" width="200">

The red text is my link to the audio file. You notice that you can control the autoplay as well. Switch that to "false" if you don't want it to automatically play. In most cases you will just want to upload the media into the streaming media folder, because then the file will open in whatever format the student has as default (media player, winamp, itunes, etc.). But my way is also an option now. I'll also not that I added a direct link below my embedded player:

Click here to download podcast.

Labels:

Comments

Post a Comment

Popular posts from this blog

Labbett button set

By
Hi again, So the first thing that I am sharing here is a button set that Mark uses in his courses. These buttons are currently found on the shared drive, but additionally I uploaded them onto a photo sharing site (picasa). I created a document with the image code and will walk you through inserting the buttons/icons into the course and week headers. The google doc with the code is found on the shared drive: Z:\Icons & Logos\buttons\img style.doc. Click on the images below to enlarge them Here is the main screen. What we would like to do is put an icon by Week 1. Make sure you are in the Author window and in the HTML editor. Find the icon that you would like to include and copy the code associated with it (underneath the icon) Paste the code into the html where you would like the icon. Normally this will be in the header. Put the img code between the brackets (it could also be depending on the header style). If done right, The image will appear beside the header. ...
3 comments
Read more

basic html tables

By
Hey all, I figure that I would expose you guys to the basics of creating tables in html. There are many ways to do this. The wysiwyg way of constructing a table would be to use the built-in eCollege table wizard, or to build a table in in MS Office or Dreamweaver. These methods offer limited customization, as is the nature of visual editors. In order to really customize every aspect of the table, you must have a working knowledge of the html used to create the table. The basic elements of a table are as follows: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 This is what the code for a basic table with a border looks like. And this is what that table would look like: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 The elements include table rows <tr> and table definitions <td> which are the individual cells. { As an aside, if you ever want to include an empty cell in a table, make sure you put the code: &nbsp;. That...
2 comments
Read more

Storytelling from SMEs

By
So I'm sure you've seen the recent emails about the upcoming CAE "Storytelling in Psychology" event given by Dr. Sandy Siegel. Sandy is one of our best SMEs (she’s in the MACC program) and she is a force in the classroom because of her storytelling skills. I think instructors’ personal/professional stories and vignettes have a lot of power to give a course relevance and heart, especially in a blended or online format with limited or no F2F interaction, and so I’ve been thinking about getting Sandy to audiorecord some brief stories for the courses she SMEs, either as an introductory “tone-setter” or as a springboard for a ‘what would you do?’-type assignment. Thing is, SMEs are rarely the sole instructors on their courses, and I’m thinking that whoever the other section instructors are may not want someone else’s voice (or video) built in, as for that term it is “their” course, not the SME’s. (In a past corporate job of mine we created situation-specific ‘Expert Vi...
1 comment
Read more