Adding/uploading audio/video files to pages (media manager)

[motionmindz]

When watching this nice video: http://processwire.com/videos/managing-a-musician-site/

I noticed that she has the possibility in a page of adding media items. I would very much like this functionality too; to easily add video or audio in several formats to a page.

But I cannot find this module or function she is using. Wondering if it is custom made ?

I would think this functionality is readily available in PW. What do I need to do ? How can I get this done in PW.

Please advise.
 

[adrian]

Hi motionmindz and welcome to PW.

Are you referring what tina is doing starting at around 1:46 in the video?

If so, she is simply using a repeater field (http://processwire.com/api/fieldtypes/repeaters/) to store the type, ID, and title. The code she has used in the template to display the video is probably something as simple as:

foreach($page->media_items as $media_item){
    echo '<iframe width="560" height="315" src="//www.youtube.com/embed/'.$media_item->media_id.'" frameborder="0" allowfullscreen></iframe>';
}

Some other tools you might find useful for media types are:

http://modules.processwire.com/modules/textformatter-video-embed/

http://modules.processwire.com/modules/process-get-video-thumbs/

http://processwire.com/talk/topic/4580-video-fieldtype/

http://modules.processwire.com/modules/textformatter-soundcloud-embed/

http://modules.processwire.com/modules/audio-mp3/

http://modules.processwire.com/modules/local-audio-files/

Hope that helps.

[motionmindz]

Dear Ade,

Thanks a lot for your quick reply.

Tina seems to have a nice workflow behind her sites. So I wondered how she implemented all that.

Actually, to be honest, as I find PW pretty intuitive I already tried to install and configure the Local Audio Files MP3-DB functionality.

I did all it said in the instructions, but when trying to configure it via SETUP -> LocalAudioFiles I get following error every time:

"Can't save page 0: : Pages of type NullPage are not saveable"

And so I am stuck.

And then I read that PW would have a very efficient way of adding media files without actually having a media manager module like other CMS'es

but how to do it ? Not sure where to start, unless writing my own module from scratch.

Another question is: perhaps module code from other CMS modules can be ported into PW ? As Joomla and others have so much functionality already available in modules and addons.

Anyway, I watched the video on Repeaters and it all makes sense.

So now I want to create a Media fieldtype like 'Photo' but now for adding audio and video.

Will try to do myself but I do wonder how to implement it so I can add WAV, MP3, FLAC etc.

[motionmindz]

I am getting closer.

Created a media field with the File fieldtype referencing audio formats.

Created a media template to test with.

Created a page on this media template.

But bummer: the page itself cannot be viewed ? It gives a 'not found error 404' while its published.

Am stuck here.

EDIT: crap, it was that I had no template php file linked to it. done this and now it works more or less.

Clicking the audio file link downloads the file and plays it back successfully.

OK so now next step using an embedded audio player!

I would like not to use a Flash audio player. Is there a better player for PW ?

[Martijn Geerts]

I've used audiojs. Works great, using HTML5 tags & fall back to flash for old IE.

[motionmindz]

I've used audiojs. Works great, using HTML5 tags & fall back to flash for old IE.

I put all files in the Audio_MP3 folder but my PW does not see a new module waiting. So I cannot install it. Why ?

[Martijn Geerts]

<motionmindz> would like not to use a Flash audio player. Is there a better player for PW ? </motionmindz>

 

I just pointed to a audio player written with javascript.

Has nothing to do ProcessWire it self. Just that it worked great for me.

[Radek]

I put all files in the Audio_MP3 folder but my PW does not see a new module waiting. So I cannot install it. Why ?

This will need more work.

Load audiojs:

<script type="text/javascript" src="<?php echo $config->urls->templates; ?>scripts/audiojs/audio.min.js"></script>

Create js for controling player

<script>
    $(function() {
        //Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('ol li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });

        //Load in the first track
        var audio = a[0];
            first = $('ol a').attr('data-src');
        $('ol li').first().addClass('playing');
        audio.load(first);

        //Load in a track on click
        $('ol li').click(function(e) {
          e.preventDefault();
          $(this).addClass('playing').siblings().removeClass('playing');
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });
        //Keyboard shortcuts
        $(document).keydown(function(e) {
          var unicode = e.charCode ? e.charCode : e.keyCode;
          //right arrow
          if (unicode == 39) {
            var next = $('li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.click();
          //back arrow
          } else if (unicode == 37) {
            var prev = $('li.playing').prev();
            if (!prev.length) prev = $('ol li').last();
            prev.click();
          //spacebar
          } else if (unicode == 32) {
            audio.playPause();
          }
        })
    });
 </script>

In your template you can do something like this.

if (count($page->audio) > 0 ){

    $outAudio = "<audio preload></audio>";
    $outAudio .= "<ol class='playlist'>";

    foreach ($page->audio as $song) {

        if ($song->description != "") {
            $songName = $song->description;
        } else {
            $songName = $song->name;
        }

        $outAudio .= '<li><a href="#" data-src="'.$song->url.'">'.$songName.'</a></li>';
    }
    $outAudio .= "</ol>";
}
echo $outAudio;