Skip to main content

Embed an audio player in html

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.

Comments

Popular posts from this blog

Encouraging student voice and video comments

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 ...

What's all this talk about APIs?

These application programming interfaces (APIs) are all the rage these days.  We hear about them in online commerce, social media, and now they are flooding the world of education and online learning.  So what are they exactly? An API is a way for websites, programmers, and applications to communicate with each other, exchanging information.  If I have a database with information that I would like to disseminate then I can develop an API and make that accessible to the world.  External developers can then create APIs with the purpose of communicating with my  API, and thus extract the information that I am making public.  It's similar to the notion of "my people will contact your people and we'll make this happen".  Only the people in mention is actually a software-to-software exchange. Why APIs are important APIs are a way to access information or databases which would otherwise be inaccessible.  For example, my database might be protected ...

Recap of L&L

I just wanted to put up a recap of what I went over yesterday. This should be useful for Nicole and Gia, who didn't make it for that portion, as well as for anyone who would like to go over that again. The short description of my portion yesterday was that there are a wealth of resources and materials built right into PowerPoint that most people don't know about (or they don't realize the possibilities available). We are able to take what is given to us and modify it and truly make it our own.