To make an audio file player (mp3, etc) audio plugin helps
. The problem is that it is incomplete (The move from Drupal 5 to Drupal 6 has several pending). One may be completing the parties that do not work, as the playlist, but is a bit complicated. It also requires support multiple modules. I said, maybe it can be solved more simply. How would I do? This article does not intend to instruct on the best way to make an audio player. Simply speak the way I'm walking (it is a work in progress) in developing a solution. It may help someone somehow. 
The idea The idea is to upload audio files (start with mp3) that can be organized into playlists, or playlists.
A user can upload as many files as you want and define their own lists.
preferably with software that has no restrictions on commercial use, just in case.
method
Start with the essentials, the least. Moving towards the next minimum and essential step. And so on. Applying the standard freely.
Outlining the solution
Upload . You can use the module FileField. Playlist
. I found a module for this, apart from audio. Searched plugins for jQuery. I want one that allows to stop running the play list. found drplayer and
flowplayer
, among others. Flowplayer looks very promising. Drplayer is simple to use. After many laps, I thought it was distracting me too much on the choice of player, which perhaps could be interchangeable. Exploring drPlayer I make a simple demo without using Drupal to check which requires:
\u0026lt;html> \u0026lt;head> \u0026lt;meta http-equiv = "content-type" content = "text / html; charset = utf-8" /> \u0026lt;link rel="stylesheet" href=" drplayer.css
" type="text/css" />
<script src="
jquery.js
" type="text/javascript"></script>.
<script src="
drplayer.js
" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() {
$("#playlist").playlist( { playerurl: "swf/
drplayer.swf " }
);
});
</script>
</head> <body> <div id="
playlist
">
<div href="
mp3/cancion-01.mp3
" style="width: 400px;" class="
item
">
<div> <div class="fr duration
">03:00</div> <div class="btn play"></div> <div class=" title "><b>Artista 1</b> - Canción 01</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div> <div href="
mp3/cancion-02.mp3
" style="width: 400px;" class=" item ">
<div>
<div class="fr
duration
">04:00</div> <div class="btn play"></div> <div class=" title "><b>Artista 2</b> - Canción 02</div>
</div>
<div class="player inactive"></div>
</div>
<div class="clear"></div> </div>
<div class="clear"></div>
\u0026lt;a href="javascript:void(0);" onClick="$('#playlist').playlist('prev');"> Prev \u0026lt;/ a> \u0026lt;a href = "javascript : void (0); "onClick ="$('# playlist). Playlist (next');"> Next \u0026lt;/ a>
\u0026lt;a href =" javascript: void (0); "onClick ="$('# playlist). Playlist ('pause Pause');"> \u0026lt;/ a>
\u0026lt;a href = "javascript: void (0);" onClick ="$('# playlist) . playlist ("Play Play');"> \u0026lt;/ a>
\u0026lt;/ body>
\u0026lt;/ html>
That is, the list is contained in a block
# playlist
. Each item is a block
.
item. The title field is a block
.
title and the duration is a block
duration. Later, I found it necessary to also consider a block . Player. inactive for each item. I think you could use the views module html to build this structure. Using
id3 module getid3
to allow for use getid3 obtain the metadata of a file.
The metadata of an audio file contains information such as title, artist name, duration, album name, year, etc. getid3 Once installed, the nodes containing a file upload field will have a $ node-> field_audiofile [0] containing the metadata (you can read a little more about that in Article FileField Solving Dynamic Field Goal and using
), which can be used to fill the structure required to drplayer. Cool.
Audio Content Type
Define the content type Audio (audio) with the File field (field_audio_file) File type. Indian
also will not use the field
Body (leaving blank the name of that field). To facilitate filling Title
field, it is useful auto_nodetitle
module that is configured in the same tab edit the content type. There, indicated that the title is generated automatically if left white (giving the user the option to put another thing, if desired). Having installed the module also token, I indicated that the pattern of auto titles were:
[field_audiofile-FileField-filename] is, the name of the uploaded file.
Audio list
Set view
audios, showing
type audio nodes and fields Node: Title , Content: File
. For the duration, I need some php code entry module using views_customfield allow to use php to generate the contents of a field. At first, I put aside the question of the duration and tried to continue with the file name only. tried using templates to create the structure required for drplayer. With View-xxx.tpl.php could give each block the id and class required. # Playlist containing
.
item containing
.
and title. duration. However, the structure requires that the file name is as href element. item and could not think of a way to achieve that with the templates as the template that allows me to customize the block . item has not available a variable with the file name. I guess there's any way to use template.php to publish the variable you need in that case, but the hooks do not command much of the hearing and made me more natural to imagine that you could use a CustomField: PHP to generate all the html that is required from $ data-> nid available:
\u0026lt;? php echo
misc_get_drplayer_html_audio ($ data-> nid); ?> misc_get_drplayer_html_audio function defined in the module misc:
misc_get_drplayer_html_audio function ($ nid) {$ node = node_load
($ nid);
$ audiofile = $ node-> field_audiofile [0];
$ filename = base_path (). $ audiofile ['filepath']; $ duration = $ audiofile ['data'] ['duration']; $ duration_h = sprintf ('% 02d:% 02d', $ Duration/60, $ duration% 60);
$ artist = $ audiofile ['data'] ['tags'] ['artist'];
$ title = $ audiofile ['data'] ['tags'] [ 'title'];
$ html = 'drPlayer
'. $ duration_h. "
'. $ Artist. "- '. $ Title. "'; return $ html;}good thing about using this method is that it allowed me more comfortable access to the metadata of the file, not directly available in the view.With this, you can get a view that shows the structure of songs required by drplayer. Module
drPlayer To add to drupal, create the module drplayer, empty, just to hold the files of that library in the subdirectory
modules / drplayer / drplayer /
. Then, in the view audios, in the display that shows the playlist files, Basic settings,
header, indicated the following contents php:
\u0026lt;? Php
drupal_add_css (drupal_get_path ('module' 'drplayer').'/ drplayer / drplayer.css', 'module'); drupal_add_js (drupal_get_path ('module', 'drplayer').'/ drplayer / drplayer.js' 'Module'); drupal_add_js ('$ (document). Ready (function () { $ ("# playlist"). Playlist ( {
playerurl: "'. Base_path (). Drupal_get_path ('module', ' ').'/ drplayer drplayer / swf / drplayer.swf "
});User can define your own playlist. References
});', 'inline');
?>
drplayer
This invokes the time to show the view.
Next step
http://dryicons.com/free-icons/preview/colorful-stickers-icons-set/
0 comments:
Post a Comment