How to embed the audio player in a regular node?
albertc - July 20, 2007 - 16:14
Hi
I want to embed an mp3 player in some existing nodes, as well as to some new ones. I have installed the audio and views modules and I have created new audio nodes for each mp3 file. However, I have to go to the audio node itself, and then clicking on the 'play' link, yet another window opens with the audio player.
What I need is to embed the audio player in the regular node, in the same manner that I'm already using img-assist (or raw html) to embed pictures.
How should I do that?
Thanks
--
Albert
I'd be interested in knowing
I'd be interested in knowing how to do this too. Image Assist module is great b/c it lets you put images anywhere with ultimate flexibility. Having the same capability for audio file players (the flash ones i imagine) would be very very useful.
This may be nothing, but i
This may be nothing, but i took a quick cursory look at the article page. It's CCK based. I have no idea if it is what we're looking for or not.
http://drupal.org/project/mediafield_display
Embed the xspf flash player for mp3 files
Download the xspf flash player from http://musicplayer.sourceforge.net/ and unpack the version you require into files/xspf. The versions are Slim, Extended and Button. Put your mp3 file(s) here too.
Add this HTML to a node to see all three versions:
Music Player Button
<object type="application/x-shockwave-flash"
data="http://your-url/files/xspf/button/musicplayer.swf?song_url=http://
your-url/files/xspf/your-file.mp3"
height="17" width="17"><param name="movie"
value="http://your-url/files/xspf/button/musicplayer.swf?song_url=http://
your-url/files/xspf/your-file.mp3"><img
src="noflash.gif" alt="" height="17" width="17">
</object>
<br>
Music Player Slim
<object type="application/x-shockwave-flash"
data="http://your-url/files/xspf/xspf_player_slim.swf?playlist_url=http://
your-url/files/xspf/yourplaylistlist.xspf"
height="170" width="400">
<param name="movie"
value="http://your-url/files/xspf/xspf_player_slim.swf?playlist_url=http://
your-url/files/xspf/yourplaylistlist.xspf">
</object>
<br>
Music Player Extended
<object type="application/x-shockwave-flash"
data="http://your-url/files/xspf/xspf_player.swf?playlist_url=http://
your-url/files/xspf/yourplaylistlist.xspf"
height="170" width="400">
<param name="movie"
value="http://your-url/files/xspf/xspf_player.swf?playlist_url=http://
your-url/files/xspf/yourplaylistlist.xspf">
</object>
The button plays a single named file, the others expect a playlist.
The format of the playlist can be found by inspecting those at the urls given at http://musicplayer.sourceforge.net/ or at http://forevergeek.com/articles/xspf_a_better_way_to_play_mp3s_on_your_s...
eg
<?xml version="1.0" encoding="UTF-8"?>
<playlist version=”0″ xmlns=”http://xspf.org/ns/0/”>
<trackList>
<track>
<location>http://www.example.com/folder/song.mp3</location>
<image>http://www.example.com/folder/album.jpg</image>
<annotation>Name of Track</annotation>
</track>
<track>
<location>http://www.example.com/folder/song2.mp3</location>
<image>http://www.example.com/folder/album2.jpg</image>
<annotation>Name of Track 2</annotation>
</track>
</trackList>
</playlist>
Regards,
Chris
Me too--anyone figure this out?
Hey, I'm looking for this too. It would be great if anyone had any answers.
Here you go guys : <object
Here you go guys :
<object type="application/x-shockwave-flash"><param name="movie" value="/modules/audio/players/1pixelout.swf" />
<param name="wmode" value="transparent" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<embed src="/modules/audio/players/1pixelout.swf" flashvars="soundFile=http://yourfile.mp3" width="290" height="24" />
</object>
http://www.dobro.gr - Online community for Greek students in Bulgaria
http://virgus.no-ip.org - simple designs
Thanks so much Dimitris.
Thanks so much Dimitris. So, if you wanted to add this code to the audio function so that any audio file would be embedded like this, where would you add the code and what string would you want to hold the file in question? In other words, how do you make audio uploaded by any user, play within the node when it is clicked without this code needing to be entered each time by users who won't know it.
hi,
hi,
i am using coolfilter module on my site http://newskicks.com/beta for this stuff.you can use the same.for a demo please check my site.
http://www.newskicks.com/beta
That's cool, but there
That's cool, but there should still be a way to do that automatically, without the user having to add tags before and after. It would seem like a simple script, but I don't know enough to write it. Is there really nothing like that already out there?
Could IMCE be a solution?
Have you tried TinytinyMce + IMCE combination?
In IMCE there's a function which will let you insert a media file - it can be anything like flash, quicktime, window media, shockwave, real media. This is very useful and I am using it at the moment just to embed a player in a page. The options of this plugin, will also let you choose whether it's going to auto play/start, or you let the users click on "play".
The reason why I am pointing out TinytinyMce + IMCE is because is the only combination that worked for me - The Wysiwyg is a great and noble idea, but at the moment I am getting trouble into making things work together. Hopefully it's going to be improved as we speak.
Hope this will help!
Ciao
I hacked the audio module a
I hacked the audio module a bit, and I'm thinking of submitting this as either a contributed sub-module or a patch. Basically, if you create another filter, you can use it in conjunction with your site's Input Formats config. So, in audio.module, I added this:
<?php
/**
* Implementation of hook_filter()
*/
function audio_filter($op, $delta = 0, $format = -1, $text = '', $cache_id = 0) {
if ($op == 'list') {
return array(
0 => t('Replace [audio] tags with a player'),
);
}
switch ($delta) {
case 0:
switch ($op) {
case 'description':
return t('Replace [audio] tags with embedded mp3 player');
case 'prepare':
return $text;
case 'process':
$regex = '#\[audio]((?:[^[]|\[(?!/?audio])|(?R))+)\[/audio]#';
return preg_replace_callback($regex, 'audio_embed_player', $text);
}
break;
}
}
/**
* Function to return the audio player based on a $nid (from preg_replace_callback)
*/
function audio_embed_player($input) {
if (is_array($input)) {
$input = $input[1];
}
$node = node_load($input);
$player = '<object type="application/x-shockwave-flash" data="/sites/all/modules/audio/players/xspf_slim.swf" width="400" height="15">
<param name="movie" value="/sites/all/modules/audio/players/xspf_slim.swf" />
<param name="menu" value="false" />
<param name="quality" value="high" />
<param name="FlashVars" value="song_url='.$node->url_download.'&song_title='.$node->title.'" />
<embed src="/sites/all/modules/audio/players/xspf_slim.swf" flashvars="song_url='.$node->url_download.'&song_title='.$node->title.'" width="400" height="15" />
</object>';
return $player;
}
?>
Once this code is added to the module, you can go to /admin/settings/filters and check off the "Replace audio tags" checkbox in whatever input format you like. Once you've done this, edit some content that uses this filter and add something like [audio]123[/audio] where 123 is the nid of an Audio node. The mp3 player is then populated with the Title of the node as well as the node's url_download element (a url-encoded version of the full filepath).
Unfortunately I haven't gotten to the point where you can simply paste an URL to an mp3 file, but that shouldn't be too much harder. Only other caveat is of course that you need the Audio module installed, and the XPSF player, which comes bundled with the Audio module. Also remember this is just a hack for now but hopefully could lead to something better for the Audio module itself.
Help fund more Ubercart and Drupal development! Donate!