Community & Support

How to embed the audio player in a regular node?

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

Comments

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

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

http://www.dobro.gr - Online community for Greek students in Bulgaria
http://tus.ath.cx

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!

Simple cheat to embed audio player instance(s) in node

I tried to get this to work too and in the end I just cheated with the html. Will post if I get a simpler, more elegant solution.

audio-player (Flash mp3 player) must be installed and audio node created. See http://blip.tv/file/1628471 and / or http://www.youtube.com/watch?v=2XIuc6oCoGA for a couple of tutorials.

Once you have completed setting up the audio node, log out and go to the audio node (e.g., mydomain.com/node/xx), then right-click on the page to View Page Source and simply copy out the player code and place it in your page node source code. It would look something like this (I have substituted site-dependent fields with text in all caps and you will most likely need to change the soundFile path):

<h3>TITLE</h3>
<p>BODY</p>
<div class="field field-type-filefield field-field-mp3">
<div class="field-label">LABEL</div>
<div class="field-items">
<div class="field-item odd">
<p id="mp3player_1">It looks like you don't have Adobe Flash Player installed. <a href="http://get.adobe.com/flashplayer/">Get it now.</a></p>
<script type="text/javascript">AudioPlayer.embed("mp3player_1", {soundFile: "/sites/default/files/media/AUDO_FILE.mp3"});</script>
</div></div></div>

Important: if you need to embed more than one instance of the player on any one page, be sure to increase the number of the player id in both its appearances in the above from mp3player_1 to mp3player_2, mp3player_3 etc.
See the working example at www.beverlyjensen.net/audio