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

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

Canvas Conference: InstructureCon 2013

By
This last week I had the opportunity to attend Instructure's annual conference which focuses on it's flagship product, Canvas.  Founded in 2008, Instructure launched Canvas in 2011, and in that same year hosted its first annual conference.  The attendance at the first conference was meager, but in 2012 the attendance numbers grew to 600 attendees.  This year marked the third annual conference, with 1,200 attendees and a giant inflatable panda mascot flocking to the resorts of Park City.  Including staff and volunteers, some 1,500 people gathered to present and attend sessions.  After-hour festivities were themed based on the 1980's and included a conference carnival, visits from the Ghostbusters, a DeLorean (yes I had to google the spelling), and concerts from an 80's cover band and MC Hammer himself. The festivities were grand (and the 80's florescence was blinding), but the real value of the conference was obviously in the sessions.  Here are a few ...
Post a Comment
Read more

<hr> styling with CSS

By
Yea, I know that it has been a while since the last post. I've been busy lately! Anyway, this one will be very short and sweet and perhaps moderately useful every once in a while. We will discuss how to modify the properties of a horizontal rule <hr>. <hr>'s have been revered as rogue html elements for many years now. They don't behave well and often when styled they appear differently based on which browser you are using. So why bother even learning this, you ask? And I answer: I don't know. So let's get into it, shall we? In days past, you could actually style <hr>'s using pure html. You could type something like <hr size="5px" width="90%" align="center"> and it would actually render. But that is all deprecated now. As is becoming the trend with everything web-design related in terms of formatting, you'll want to switch over to CSS for that stuff. Let's begin exploring the possibiliti...
Post a Comment
Read more