ISSUE: Embedded mp3 files autoplay in D2L even when they are set not to autoplay

Users report that mp3 files uploaded to D2L and embedded in the course content autoplay even when they are set not to autoplay.

Affects

  • The following browsers were tested:
    • Firefox 42 (Windows 8.1 Enterprise, Windows 10 Education, and OSX 10.11)
    • Chrome 46.0.2490.86 m (64-bit) (Windows 8.1  Enterprise, Windows 10 Education, and OSX 10.11)

Status

As of 11/20/2015 this issue still exists. 

Detailed Description

One method to embed mp3s in a content page of D2L consists of clicking Insert Stuff, clicking Course Offering Files and finally selecting an mp3 file to embed it in a D2L page. Even though you do not select Start playing automatically, the mp3 file autoplays when you or your students load the content page. This is what the Insert Stuff -> Course Offering Files window looks like:
Screen shot of clicking "Insert Stuff" and selecting "Course Offering Files" window for inserting an mp3 file into a D2L course page

Workarounds

Some workarounds to get your mp3 files to not autoplay:

Option 1: Upload your audio files to Kaltura MediaSpace and embed them in your D2L content pages

We generally recommend hosting video and audio files (including mp3 files) in Kaltura MediaSpace. 

1. To upload your audio file from inside D2L please see Document 40548 is unavailable at this time. . Even though the kb article is using a video file in the example, you can also use an mp3 file. The downside of this method is that the embedded mp3 will look like a video:

My Media MP3 embed

If you want to use an audio player that looks more like a traditional audio player please see UW-Madison Kaltura - How to Embed Audio .

Option 2: Use an HTML5 player to embed your mp3 files

1. Upload your mp3 files to D2L. We suggest putting them in a directory to help keep your files organized. In this example that directory will be "audiofolder".

2. Create or edit a content page in D2L.

3. Inside the content page click HTML source editor. The icon is in the lower left of the content editing window:
HTML Source Editor icon

4. After the <body> tag cut-and-paste the following code:

<audio controls>=
<source src="audiofolder/audiofile.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

Replace “audiofolder/audiofile.mp3” with the location and name of your mp3 file. Your HTML editor will look something like this:
HTML Source Editor with HTML5 mp3 player code inserted

5. Click Save.

6. Click Update.

7. Your Content page with the HTML5 mp3 player should look something like this:
D2L Content page with HTML5 mp3 player embedded in it




Keywords:embed, embedded, mp3, autoplay, auto, play, d2l, bugs, bug, error, broken, fix, workaround, player, html5   Doc ID:58372
Owner:Dan L.Group:Learn@UW Madison
Created:2015-11-20 08:31 CDTUpdated:2015-12-09 18:04 CDT
Sites:DoIT Help Desk, DoIT Tech Store, Learn@UW Madison
Feedback:  0   0