Path to files?

[joe_ma]

Hello

I am trying to implement some kind of HTML5 audio player.

Users should be able to upload their music files that are automatically included in <audio> tags.

Here's my approach so far:

- for every new audio I use a new page that has only one field of the type "file" named "audio". I limited the uploads to two, as you need mp3 and ogg files for the player to work in most browsers. These pages are all subpages of a hidden page with no template.

In the template, where I like to play the audiofiles, I put the following code:

<?php 

	$audios = $pages->find("parent=/audiodateien/");
	
	if (count($audios)) {
		
	echo "<h2>Einige unserer Musikstücke</h2>";
	
	$out = '';
	$out .='<ul>';
	
	foreach ($audios as $audio) {
		$out .="<li>{$audio->title}<br>";
		$out .="<audio controls autobuffer>";
		
		$audiofiles = $audio->audio->filename;
		
		foreach ($audiofiles as $audiofile) {
		
		$out .="<source src='{$audiofile->url}' />";
		$out .="</audio>";
		}
	}
	$out .='</ul>';
	
	echo $out;
	}
?>

But this produces only a list with the titles and empty <audio> tags. Obviously I didn’t get the part with the audiofiles right.

Thanks for help.

[adrian]

I think it is likely this line: $audiofiles = $audio->audio->filename;

Try it with just: $audiofiles = $audio->audio;

You need to keep that audio field as an array, rather than getting its filename at that point.

[Joss]

The way I did it on my music site was using media elements,

I created two file fields, one for the ogg and one for the mp3 - this is as much to remind me to upload both! You could make both required as an extra hint!

then I just did this:

<?php if($page->audio_track){ ?>

<audio id="player2" controls="controls" style="width:350px;">
   <source id="mp3_src" src="<?php echo $page->audio_track->url; ?>" type="audio/mp3">
   <source id="ogg_src" src="<?php echo $page->audio_track_ogg->url; ?>" type="audio/ogg">
</audio>

<?php } ?>

This is obviously aimed at Media Elements, but the principle is the same anyway you do it. I added the IF so I didn't get any errors if I didn't upload a file. 

[adrian]

I agree with Joss - separate fields sound like a much better solution!

[joe_ma]

I also agree with Joss .

The way he suggested works fine.

Thank you very much!