Note: You are currently viewing documentation for Moodle 2.0. Up-to-date documentation for the latest stable version is available here: MP3 player.

MP3 player: Difference between revisions

From MoodleDocs
(added template)
 
(20 intermediate revisions by 11 users not shown)
Line 1: Line 1:
The multimedia filter embeds MP3 files in a streaming player made with Flash. The big MP3 player is used when an MP3 file is added as a [[Resources|resource]] e.g. [http://moodle.org/mod/resource/view.php?id=2296 Moodle Features Demo: MP3 file]. The small player is used when an MP3 file is linked to from within a forum post or another resource or activity using the [[HTML editor]].
{{Working with media}}
{{Improve}}
The multimedia filter embeds MP3 files in a streaming player made with Flash. The big MP3 player is used when an MP3 file is added as a [[Resources|resource]]. The small player is used when an MP3 file is linked to from within a forum post or another resource or activity using the [[HTML editor]].
 
:''Note:'' The MP3 Player used in Moodle 1.9 and the media filter does not recognise .m4a and .aac file types.


==MP3 player rates==
==MP3 player rates==


To ensure that MP3 files are played at the correct rate, sample rates of 11, 22 or 44 kHz should be used. Constant Bit Rate (CBR) files are also recommended over Variable Bit Rate (VBR) files. Please note that sample and bit rates are not the same thing. See the two sections MP3 sample rates and MP3 bit rates below.
To ensure that MP3 files are played at the correct rate, sample rates of 11, 22 or 44 kHz should be used. Constant Bit Rate (CBR) files are also recommended over Variable Bit Rate (VBR) files. Please note that sample and bit rates are not the same thing. See the two sections MP3 sample rates and MP3 bit rates below.


==MP3 sample rates==
==MP3 sample rates==
Line 15: Line 18:


* 44.100 kHz
* 44.100 kHz


==MP3 bit rates==
==MP3 bit rates==
Line 35: Line 37:
* 64 kbps, stereo - most music sounds OK
* 64 kbps, stereo - most music sounds OK


==MP3 encoders==
Audacity is a popular, free audio editing tool. However it is not suitable for encoding MP3s for use with Flash Player at the default sample rate settings. At lower bit rates, it uses sample rates that are not a multiple of 11.025 kHz and the resulting MP3 files may either play at an incorrect speed, the chipmunk effect, or not play at all. See the Audacity documentation on how to set the sample rates.
Other free MP3 encoders:
* [http://www.videohelp.com/tools/SUPER?oldversions=1 SUPER] - a general media encoder that offers full control over media file parameters and supports all major audio and video file types.
If you have used an MP3 encoder with success across different operating systems and browsers for Flash Player, please post it here.


==Flash security settings==
==Flash security settings==
Line 51: Line 44:
===Cross-domain policy===
===Cross-domain policy===


To create a cross-domain policy, save the code below as ''crossdomain.xml'' and place the file at the root of the remote server.
To create a cross-domain policy, save the code below as ''crossdomain.xml'' and place the file at the root (public_html or httpdocs) of the remote server.


<cross-domain-policy>
<pre>
    <allow-access-from domain="www.yourmoodlesite.org" />
<?xml version="1.0" encoding="utf-8"?>
</cross-domain-policy>
<cross-domain-policy>
<!-- Place top level domain name -->
<allow-access-from domain="www.yoursite.com" secure="false"/>
<allow-access-from domain="www.yoursite.com" to-ports="80,443"/>
<allow-http-request-headers-from domain="yoursite.com" headers="*" />
<!-- use if you need access from subdomains. testing/www/staging.domain.com -->
<allow-access-from domain="*.yoursite.com" secure="false" />
<allow-access-from domain="*.yoursite.com" to-ports="80,443" />
<allow-http-request-headers-from domain="*.yoursite.com" headers="*" />
</cross-domain-policy>
</pre>


Please refer to [http://www.macromedia.com/devnet/flash/articles/fplayer_security.html Macromedia - Developer Center: Security Changes in Macromedia Flash Player 7] for further details.
Please refer to [http://www.macromedia.com/devnet/flash/articles/fplayer_security.html Macromedia - Developer Center: Security Changes in Macromedia Flash Player 7] for further details.
Line 63: Line 66:
Please refer to [http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager02.html Macromedia - Flash Player Help: Global Privacy Settings Panel].
Please refer to [http://www.macromedia.com/support/documentation/en/flashplayer/help/settings_manager02.html Macromedia - Flash Player Help: Global Privacy Settings Panel].


==MP3 player colours==
==MP3 player customisation==
 
''theme/yourtheme/config.php'' contains options for changing the default colours (black, white and grey) of the MP3 player.


$THEME->resource_mp3player_colors =
It is possible to customise the colours of the the MP3 player via CSS included in the theme. For example
  'bgColour=000000&btnColour=ffffff&btnBorderColour=cccccc&iconColour=000000&'.
  'iconOverColour=00cc00&trackColour=cccccc&handleColour=ffffff&loaderColour=ffffff&'.
  'font=Arial&fontColour=3333FF';
/// With this you can control the colours of the "big" MP3 player  
/// that is used for MP3 resources.


$THEME->filter_mediaplugin_colors =
<code>
  'bgColour=000000&btnColour=ffffff&btnBorderColour=cccccc&iconColour=000000&'.
.mp3flowplayer_backgroundColor {color: #000000;}
  'iconOverColour=00cc00&trackColour=cccccc&handleColour=ffffff&loaderColour=ffffff&';
</code>
/// ...And this controls the small embedded player


==MP3 playback options==
modifies the background colour, see http://flowplayer.org/documentation/skinning/controlbar.html?skin=default for more colour properties, any property that ends with '...Color' can be overridden via CSS.


''theme/yourtheme/config.php'' contains options for changing the playback options of the MP3 player.
For accessibility reasons it is not allowed to initiate an automatic playback.
 
* <code>waitForPlay</code> determines whether the MP3 file starts downloading as soon as the player appears on the page (<code>waitForPlay=no</code>), or whether the play button must be pressed before the MP3 file starts downloading (<code>waitForPlay=yes</code>).
 
* <code>autoPlay</code> determines whether the MP3 player starts playing the MP3 as soon as the player appears on the page (<code>autoPlay=yes</code>), or whether it must be fully downloaded before playing (<code>autoPlay=no</code>).
 
* <code>buffer</code> determines how many seconds of the MP3 file must be downloaded before the MP3 starts playing e.g. 10 seconds (<code>buffer=10</code>).
 
'''Default playback options'''
 
* Big MP3 player: <code>buffer=10&waitForPlay=no&autoPlay=yes</code>
* Small MP3 player: <code>waitForPlay=yes&autoPlay=no</code>


==Inserting sounds into questions==
==Inserting sounds into questions==
Line 103: Line 87:
*(3) OR both!
*(3) OR both!


The [[filter]] for multimedia must be on and Flash enabled. The HTML editor needs to be active for the question content.
The [[Filter]] for multimedia must be on and Flash enabled. The HTML editor needs to be active for the question content.
#In the question text, type "Listen to this sound and select your answer."
#In the question text, type "Listen to this sound and select your answer."
#Select by highlighting "this sound"
#Select by highlighting "this sound"
#Click on the Insert Web Link button
#Click on the Insert Web Link button
#Give the address of your MP3 file, either a web address or an internal address of a file located in the moodledata directory of your Moodle course.
#Give the address of your MP3 file, either a web address or an internal address of a file located in the moodledata directory of your Moodle course.
#Toggle HTML source and view the result, something like this: Listen to <nowiki> < a href="http://moodle/file.php/2/audio/trumpet.mp3" >this sound< /a > </nowiki>and say what you heard.
#Toggle HTML source and view the result, something like this: Listen to <nowiki> < a href="http://moodle/file.php/2/audio/trumpet.mp3" >this sound< /a > </nowiki>and say what you heard. (See NOTE about filenaming below!)
#Now type in the rest of your question data, depending on its type (MCQ, short answer, etc.).
#Now type in the rest of your question data, depending on its type (MCQ, short answer, etc.).
#The result will look something like (3) in screen dump below.
#The result will look something like (3) in screen dump below.
#The student has a choice of using the Flash player (with its minimum buttons) or clicking on the link, which will open the computer's default media player, with all its buttons.
#The student has a choice of using the Flash player (with its minimum buttons) or clicking on the link, which will open the computer's default media player, with all its buttons.
Note: Unfortunately it would be best to give filenames to the
sounds that do NOT contain the information you are asking about.
There are several ways the page viewer can see that name and see
"Aha, it's a trumpet!"


(2) Method to get the Flash player only, and no link to open an external player
(2) Method to get the Flash player only, and no link to open an external player
Line 126: Line 115:
[[Image:Quiz question MP3 example.JPG|thumb|center|Example of Quiz Question with Sound]]
[[Image:Quiz question MP3 example.JPG|thumb|center|Example of Quiz Question with Sound]]


== Temporarily disable the MP3 player ==
==Tips and tricks==
===Temporarily disable the MP3 player ===
* You can surround your link with <nowiki><nolink></nolink></nowiki> tags to stop any kind of processing including the multimedia filters that create the MP3 player. This may be useful when linking to external MP3 files with characters in their name that Flash cannot understand.
* You can surround your link with <nowiki><nolink></nolink></nowiki> tags to stop any kind of processing including the multimedia filters that create the MP3 player. This may be useful when linking to external MP3 files with characters in their name that Flash cannot understand.
:''TIP:''  Be careful with the no link tags or any user written HTML code.  The [[HTML editor]] may eliminate some of your work if you use the HTML editor in the future.  The HTML editor tries to tidy things up for the new user but this can frustrate an experienced user of HTML code.
:''NOTE:'' This does not work for something like the following inserted into a [[Web page|web page resource]]. (Add a resource > Compose a web page)
<nowiki><nolink><a href="http://theExampleServer.com/file.php/55/mp3_2/mt16/The_file.mp3"> The_file.mp3</a></nolink></nowiki> , however you can stop the multimedia filter from showing when linking to files by adding ?forcedownload=1 to the end of the link.


==See also==
==See also==
 
* [[Audio in Moodle]] for  links to audio MP3 encoders, audio programs, modules and plugins for Moodle
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=43297 Multimedia resource filtering on the course page] forum discussion
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=43297 Multimedia resource filtering on the course page] forum discussion
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=14663 mp3 player rates] forum discussion
* Using Moodle [http://moodle.org/mod/forum/discuss.php?d=14663 mp3 player rates] forum discussion
* [[Audio in Moodle]]
 
* [[Podcasting]]
* [[Podcasting]]


Line 140: Line 133:
[[Category:Filter]]
[[Category:Filter]]
[[Category:Audio]]
[[Category:Audio]]
[[pl:Odtwarzacz_MP3]]
[[pl:Odtwarzacz_MP3]]
[[ja:MP3プレイヤー]]

Latest revision as of 13:24, 23 September 2011

This page really needs improving. Please see the page comments for suggestions of what to include, then remove this template when you're done.

The multimedia filter embeds MP3 files in a streaming player made with Flash. The big MP3 player is used when an MP3 file is added as a resource. The small player is used when an MP3 file is linked to from within a forum post or another resource or activity using the HTML editor.

Note: The MP3 Player used in Moodle 1.9 and the media filter does not recognise .m4a and .aac file types.

MP3 player rates

To ensure that MP3 files are played at the correct rate, sample rates of 11, 22 or 44 kHz should be used. Constant Bit Rate (CBR) files are also recommended over Variable Bit Rate (VBR) files. Please note that sample and bit rates are not the same thing. See the two sections MP3 sample rates and MP3 bit rates below.

MP3 sample rates

Flash Player can produce undesirable results if the MP3 files are not encoded at a sample rate that is not a multiple of 11.025 kHz. In other words, the acceptable sample rates are:

  • 11.025 kHz
  • 22.050 kHz
  • 44.100 kHz

MP3 bit rates

Flash player cannot play MP3 files with a bit rate higher than 128 kbps, which is the default bit rate for most MP3 encoders. For use on the web, lower bit rates are recommended because they download faster and take up less server disk space. Experiment with different bit rates to get the smallest file you can with acceptable sound quality. Common bit rates are:

  • 32 kbps, mono - speech only
  • 40 kbps, mono - music might sound OK
  • 40 kbps, stereo - speech only
  • 48 kbps, mono - some music sounds OK
  • 48 kbps, stereo - speech only
  • 56 kbps, stereo - some music sounds OK
  • 64 kbps, stereo - most music sounds OK


Flash security settings

Security changes in Flash player 7 may result in the MP3 player not playing MP3 files hosted on a remote server. This issue may be resolved by writing a cross-domain policy for the remote server and/or each user changing their global security settings in the Flash player settings manager.

Cross-domain policy

To create a cross-domain policy, save the code below as crossdomain.xml and place the file at the root (public_html or httpdocs) of the remote server.

<?xml version="1.0" encoding="utf-8"?>
<cross-domain-policy>
<!-- Place top level domain name -->
<allow-access-from domain="www.yoursite.com" secure="false"/>
<allow-access-from domain="www.yoursite.com" to-ports="80,443"/>
<allow-http-request-headers-from domain="yoursite.com" headers="*" />
<!-- use if you need access from subdomains. testing/www/staging.domain.com -->
<allow-access-from domain="*.yoursite.com" secure="false" />
<allow-access-from domain="*.yoursite.com" to-ports="80,443" />
<allow-http-request-headers-from domain="*.yoursite.com" headers="*" />
</cross-domain-policy>

Please refer to Macromedia - Developer Center: Security Changes in Macromedia Flash Player 7 for further details.

Global security settings

Please refer to Macromedia - Flash Player Help: Global Privacy Settings Panel.

MP3 player customisation

It is possible to customise the colours of the the MP3 player via CSS included in the theme. For example

.mp3flowplayer_backgroundColor {color: #000000;}

modifies the background colour, see http://flowplayer.org/documentation/skinning/controlbar.html?skin=default for more colour properties, any property that ends with '...Color' can be overridden via CSS.

For accessibility reasons it is not allowed to initiate an automatic playback.

Inserting sounds into questions

In a forum, Joseph Rézeau offer this

There are various ways to insert links to media files in Moodle. You can

  • (1) insert a link which when clicked will open a new window activating your computer's default media player (e.g. quicktime, realaudio, windows media player, etc.)
  • (2) OR rely on the automatic insertion of the small Flash player built-in Moodle
  • (3) OR both!

The Filter for multimedia must be on and Flash enabled. The HTML editor needs to be active for the question content.

  1. In the question text, type "Listen to this sound and select your answer."
  2. Select by highlighting "this sound"
  3. Click on the Insert Web Link button
  4. Give the address of your MP3 file, either a web address or an internal address of a file located in the moodledata directory of your Moodle course.
  5. Toggle HTML source and view the result, something like this: Listen to < a href="http://moodle/file.php/2/audio/trumpet.mp3" >this sound< /a > and say what you heard. (See NOTE about filenaming below!)
  6. Now type in the rest of your question data, depending on its type (MCQ, short answer, etc.).
  7. The result will look something like (3) in screen dump below.
  8. The student has a choice of using the Flash player (with its minimum buttons) or clicking on the link, which will open the computer's default media player, with all its buttons.
Note: Unfortunately it would be best to give filenames to the
sounds that do NOT contain the information you are asking about.
There are several ways the page viewer can see that name and see
"Aha, it's a trumpet!"

(2) Method to get the Flash player only, and no link to open an external player

  1. In the question text, type "Listen to this sound xxx and say what you heard."
  2. Select xxx
  3. Click on the Insert Web Link button
  4. Give the address of your MP3 file, either a web address or an internal address of a file located in the moodledata directory of your Moodle course.
  5. Toggle HTML source and view the result, something like this: Listen to < a href="http://moodle/file.php/2/audio/trumpet.mp3" >xxx< /a > and say what you heard.
  6. Delete xxx
  7. The result will look something like (2) in screen dump below.
  8. The student can only use the Flash player.
Example of Quiz Question with Sound

Tips and tricks

Temporarily disable the MP3 player

  • You can surround your link with <nolink></nolink> tags to stop any kind of processing including the multimedia filters that create the MP3 player. This may be useful when linking to external MP3 files with characters in their name that Flash cannot understand.
TIP: Be careful with the no link tags or any user written HTML code. The HTML editor may eliminate some of your work if you use the HTML editor in the future. The HTML editor tries to tidy things up for the new user but this can frustrate an experienced user of HTML code.
NOTE: This does not work for something like the following inserted into a web page resource. (Add a resource > Compose a web page)

<nolink><a href="http://theExampleServer.com/file.php/55/mp3_2/mt16/The_file.mp3"> The_file.mp3</a></nolink> , however you can stop the multimedia filter from showing when linking to files by adding ?forcedownload=1 to the end of the link.

See also