How to get all files from a directory and then make them into a javascript function?

Question

For a project I'm working on now I have to manually add the functions to play songs like this

function song(){
    mySong.src="song1.mp3";
    mySong.play();
    document.getElementById("p2").innerHTML="Now Playing:Song1";
}

But I want to be able to search a directory with php, and generate those functions from php, so I don't have to manually add each song. This is my test code, I know I did it wrong but I can't seem to get it right!

<?php
Header("content-type: application/x-javascript");
if ($handle = opendir('/wamp/www/songs/')) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
            echo 'function $entry(){mySong.src=$entry; mySong.play();       
            document.getElementById("p2").innerHTML="Now Playing:" $entry;}';
            echo "$entry";
        }
    }
    closedir($handle);
}
?>

Also, what error messages are you getting? Please edit your question and add those as well. Thank you. — jamesmortensen
– jamesmortensen, Commented May 27, 2012 at 19:33
If you use a single-quoted string ('), that variables inside will not be replaced with their accual values. So, use a double-quote (") for the first echo. — Lukas Knuth
– Lukas Knuth, Commented May 27, 2012 at 19:36

Community · Accepted Answer · 2017-05-23 11:49:09Z

2

~~Have the JS function defined in your page, with a parameter for the song source:~~

function song(entry){ mySong.src=entry; mySong.play(); document.getElementById("p2").innerHTML="Now Playing: " + entry; }

In your PHP, you'll most likely want to echo a link to play each of the songs inside that folder, right?
Do this:

<?php //Header("content-type: application/x-javascript"); if ($handle = opendir('/wamp/www/songs/')) { while (false !== ($entry = readdir($handle))) { if ($entry != "." && $entry != "..") { echo '<a href="javascript:void(0)" onclick="song(\'' . $entry . '\')">' . $entry . '</a><br />'; } } closedir($handle); } ?>

~~Note that this will show the file's path name with extension, for better display you'd just have to do some string manipulation with php/js substr/substring and explode/split.~~

Alright, I rewrote the code to work with your given example:

JS (head)

function song(entry){
    var mySong=document.getElementById("song1");
    mySong.src=entry;
    mySong.play();
    document.getElementById("p2").innerHTML="Now Playing: " + entry;
}

PHP + HTML (body)

<?php
//Header("content-type: application/x-javascript");
$path = '/wamp/www/songs/';
if ($handle = opendir($path)) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
            echo '<a href="javascript:void(0)" onclick="song(\'' . $path . $entry . '\')">' . $entry . '</a><br />';
        }
    }
    closedir($handle);
}
?>
<p id="p2"></p>
<audio id="song1" controls="controls">
    <source src="" type="audio/mpeg" />
</audio>

This will work for mp3 files played in browsers with HTML5 support.

Note that Firefox doesn't support .mp3 playback inside <audio> tags, see: Why doesn't Firefox support the MP3 file format in <audio>

Thus this solution (with your <audio>) will give satisfying results in Chrome only (not tested on opera and safari). You may want to fallback to another solution for more compatibility.

If you want compatibility with IE and Firefox, you can try using an <embed>:

JS

function song(entry){
    var mySong=document.createElement('embed');
    mySong.src=entry;
    mySong.width='250px';
    mySong.height='60px';
    document.getElementById("song1").innerHTML= '';
    document.getElementById("song1").appendChild(mySong);
    document.getElementById("p2").innerHTML="Now Playing: " + entry;
}

PHP + HTML

<?php
//Header("content-type: application/x-javascript");
$path = '/wamp/www/songs/';
if ($handle = opendir($path)) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
            echo '<a href="javascript:void(0)" onclick="song(\'' . $path . $entry . '\')">' . $entry . '</a><br />';
        }
    }
    closedir($handle);
}
?>
<p id="p2"></p>
<div id="song1"></div>

This will be effectively cross-browser, but may request a plugin installation for Firefox.

edited May 23, 2017 at 11:49

CommunityBot

11 silver badge

answered May 27, 2012 at 19:42

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Zachrip Over a year ago

Now I have the code thank you, but I keep getting an error "Uncaught type error: cannot set src to null"

Fabrício Matté Over a year ago

Does it happen for all songs or just a few cases?

Zachrip Over a year ago

Here link use chrome, inspect element, and look at the php file. It will show errors when clicking the link.

Fabrício Matté Over a year ago

Oh, you're using the audio tag. Give me a minute to rewrite the code.

Fabrício Matté Over a year ago

The HTML5 <audio> tag only works with Chrome after my testings. You could try the <embed> for more compatibility or another method, take a look: w3schools.com/html/html_sounds.asp

|

CrayonViolent · Accepted Answer · 2012-05-27 19:38:17Z

1

you have an issue with your quotes. Single quotes do not parse variables. Also, you have some quotes in the wrong place.

<?php
Header("content-type: application/x-javascript");
if ($handle = opendir('/wamp/www/songs/')) {
    while (false !== ($entry = readdir($handle))) {
        if ($entry != "." && $entry != "..") {
          echo "function $entry(){mySong.src='$entry';mySong.play();document.getElementById('p2').innerHTML='Now Playing: $entry';}";
        }
    }
    closedir($handle);
}
?>

but you will have another issue with this...your songs probably aren't going to conform to proper function names...you're going to have to rethink this "function for each song" thing...

answered May 27, 2012 at 19:38

CrayonViolent

32.6k6 gold badges61 silver badges80 bronze badges

3 Comments

VisioN Over a year ago

Are you sure that justin bieber - baby.mp3 is a good name for JavaScript function? :)

CrayonViolent Over a year ago

well no, but that's a different issue, he'll find out soon enough :P

Zachrip Over a year ago

Well I'm open for other suggestions on this guys!

Collectives™ on Stack Overflow

How to get all files from a directory and then make them into a javascript function?

2 Answers 2

7 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related