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: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 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
2 comments
Read more

SME Relationship-Building: Tips of the Week

By
A couple of things came to mind during some recent SME conversations that I want to share. You may be already doing these things, but I think it helps to put them down here for all of us to think about and discuss... Given our mandate from Nancy Davis to consult to our SMEs on pedagogical issues related to learning outcomes, FOs, etc., it's likely that we'll run into SMEs who are not used to spelling out their instructional rationales and strategies as specifically as we're asking them to, even if they are at some level "good teachers." I try to motivate them by noting that the coursemap is now viewed as much of a ‘document of record’ as the Prospectus and Syllabus are – so it needs to show the rigor and clarity of outcomes of a 'premier' e-learning experience. And if a SME's LO/FO/assignment connections aren't as Bloom-worthy as they need to be, let's communicate to him or her that "my job is to help your expertise shine through"
Post a Comment
Read more

Encouraging student voice and video comments

By
Hey team, Won and I are at the Sloan-C Emerging Technology conference (#et4online), and I wanted to share some ideas with you all regarding the utilization of audio and video features in our discussion boards.  The presenter who inspired this post is Michelle Pacansky-Brock who wrote an ebook about VoiceThread. Her institution bought a site license so that students could make comments on VT via phone, ensuring that technology wouldn't be a barrier to student participation. My thoughts are that our online and most blended students have both computers with webcams/microphones and smartphones. I think that in Canvas we don't need to rely so much on VT to facilitate an audio/visual discussion, as these features are integrated into the learning platform. Michelle conducted research in her classes via surveys and discovered that when she as an instructor left voice and video comments, 97% of the students appreciated such comments. However, 75% of the students were unwilling
Post a Comment
Read more