Member Avatar for WebMedia_1

please i need your help , there is audio playlist im working on and im try to get music from mydql database and i can get the music file to play but playlist is blank. this is my code
html code:

<ul id="playlist1" style="display:none;">
        <li data_path="assets/mp3/music1.mp3" data-thumbpath="assets/thumbnail/img.jpg" data-downloadable="yes" >
            <p><span style="font-weight:bold;">Adonai</span> - Sarkodie ft. Castro</p>
        </li>
        <li data_path="assets/mp3/music2.mp3" data-thumbpath="assets/thumbnail/img2.jpg" data-downloadable="yes" >
            <p><span style="font-weight:bold;">Dancehall</span> - Shatta Wale ft. Sarkodie</p>
        </li>
    </ul>

mtemplate code:

<?php
return <<<EOT
<li data_path="http://localhost/root/admin/music/%s" data_thumbpath="http://localhost/root/admin/images/%s"  data-downloadable="yes" >
    <p><span style="font-weight:bold;">%s</span></p>
</li>
EOT;
?>

then php:

<?php
    $template = include('mtemplate.php');
    $mysqli = new mysqli("localhost", "root", "", "database");
    if ($mysqli->connect_errno) {
        echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
    }
    $result= $mysqli->query("select * from music order by id  DESC" ) or die (mysql_error());
    $output = '';
    while($row = $result->fetch_assoc())
    {
        $output .= sprintf($template, $row['data_path'], $row['data_thumbpath'], $row['span']);
    }
    ?>
    <ul id="playlist1" style="display:none;">
        <?=$output?>
    </ul>

with the above code, i can get the player to play only the music file but playlist is not showing. thanks for your help.

  • 2 Contributors
  • 2 Replies
  • 317 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by WebMedia_1

Dani AI

Generated

Short expert note tying the thread together and a few concrete checks to prevent the same problem later.

Good catch, — hiding the playlist element with CSS can stop some players from reading its items when they initialize. Before changing markup, confirm whether the list exists and is well-formed in the DOM: open DevTools → Elements and check that the UL actually contains LI entries after the page loads. If the markup is absent, the problem is server-side; if the markup is present but invisible, the player may have skipped it because it was hidden at init time.

Other common pitfalls to verify (these came up while reading the template and PHP shown by ):

  • Make sure attribute values are plain URLs (e.g., data-path="http://...") — do not embed <a> tags inside an attribute value; that breaks HTML parsing.
  • Use standard data-* naming (hyphenated names) and match whatever the player expects.
  • Escape attribute values before inserting into HTML (PHP: htmlspecialchars($value, ENT_QUOTES)), so quotes or special chars in filenames do not corrupt the markup.
  • When using mysqli, check errors with $mysqli->error (not mysql_error()), so failures are visible while debugging.
  • If the player reads the playlist on page load, either remove the hidden style before initialization or append the items and then initialize the player.

Quick practical alternatives:

  • If you need the list hidden visually but still readable by scripts, hide it off-screen instead of display:none:
.visually-hidden { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

Debug checklist: view page source, check DevTools console for JS errors, inspect the actual LI attributes, and confirm the player initialization runs after the LI elements exist. These steps will catch most causes of a “blank” playlist.

Recommended Answers

All 2 Replies

Member Avatar for pzuurveen

remove the style="display:none;" from

    <ul id="playlist1" style="display:none;">
        <?=$output?>
    </ul>
commented: Still laughing. Heh heh. +15
Member Avatar for WebMedia_1

thanks i ve figure it out myself, it is working now

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.