Member Avatar for natehome

Hello I'm working on a music streaming website that uses groovesharks api to get stream urls. I made a javascript function that loads the stream url when a user clicks on it but it wont stream the url. I know it can stream it because i've manually put the url in the function code. calling "javascript:playtwo();" also works. can anyone tell me whats wrong with my setSong(url) function in my code. thank you.

<?php
require("gsAPI.php");
$gsapi->startSession();
$gsapi->setCountry($gsapi->getCountry());
require("gsSearch.php");
$gsSearch = new gsSearch();

$gsSearch->setTitle('cars');
$results = $gsSearch->songSearchResults(5);
$resultscode = '';
for($i = 0; $i < count($results); $i++){
    $stream = $gsapi->AudioStreamKey($results[$i]["SongID"]);
    $resultscode = $resultscode.'
    <li>
<a href="javascript:setSong('.$stream["url"].');">
<img src="http://images.gs-cdn.net/static/albums/120_'.$results[$i]["CoverArtFilename"].'" />
<h2>'.$results[$i]["SongName"].'</h2>
<p>'.$results[$i]["ArtistName"].'</p></a>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">Purchase album</a>
</li>';
}
?>
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>upcld</title>
    <link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="_assets/css/jqm-demos.css">
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="js/jquery.js"></script>
    <script src="_assets/js/index.js"></script>
    <script src="js/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript"> 
    function play(){
        var theDiv = document.getElementById('player');
        theDiv.setAttribute('src', 'band.mp3');
        document.getElementById('player').play();
    }
    </script>
    <script type="text/javascript"> 
    function playtwo(){
        var theDiv = document.getElementById('player');
        theDiv.setAttribute('src', 'cars.mp3');
        document.getElementById('player').play();
    }
    </script>
    <script type="text/javascript"> 
    function setSong(songurl){
        var theDiv = document.getElementById('player');
        theDiv.setAttribute('src', songurl);
        document.getElementById('player').play();
    }
    </script>

</head>
<body>
<div data-role="page" class="jqm-demos">

    <div data-role="header" data-position="fixed" data-theme="f">

        <div class="ui-grid-a">

                <!--<h1 style="font-size:19px; margin-left:12px;">2,146 Songs</h1>-->

        </div><!-- /grid-b -->

        <div class="ui-bar-d">
                <div class="ui-grid-a">
                    <div class="ui-block-a" style="width:78%">
                        <label for="text-mini" class="ui-hidden-accessible">Search Input:</label>
                        <input type="search" name="name" id="search-mini" value="" data-mini="true" placeholder="Search songs..."  />
                    </div>
                    <div class="ui-block-b" style="width:22%">
                        <button type="submit" data-mini="true" style="float:right" data-theme="d">Go</button>
                    </div>
                </div><!-- /grid-a -->
        </div><!-- /search bar -->
        </form>
    </div>

    <div data-role="content" class="jqm-content">

            <ul data-role="listview" data-split-icon="gear" data-split-theme="d" data-inset="false">
<?php echo $resultscode; ?>

            </ul>

            <div data-role="popup" id="purchase" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px; padding-bottom:2em;">
                <h3>Purchase Album?</h3>
                <p>Your download will begin immediately on your mobile device when you purchase.</p>
                <a href="#" data-role="button" data-rel="back" data-theme="b" data-icon="check" data-inline="true" data-mini="true">Buy: $10.99</a>
                <a href="#" data-role="button" data-rel="back" data-inline="true" data-mini="true">Cancel</a>
            </div>

            </div><!-- /content -->

            <div data-role="footer" class="footer-docs" data-theme="a" data-position="fixed">
                <form action="#" method="get">
                    <div data-role="fieldcontain">
                        <label for="slider-2" style="margin-left:15px;">Player:</label>
                        <div id = "on" style="display:show;">
                        <audio id ="player" controls autoplay=false preload="auto">
                            <source src="cars.mp3" type="audio/mpeg">
                        </audio>
                        </div>
                    </div>
                </form>

            </div>

            </div><!-- /page -->

            </body>
            </html>
  • 2 Contributors
  • 1 Reply
  • 323 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by LastMitch
Member Avatar for LastMitch

can anyone tell me whats wrong with my setSong(url) function in my code. thank you.

 <a href="javascript:setSong('.$stream["url"].');">

What is your url? You never declare it your code that you provided above? Is it in the database?

it should look like this:

$url = "your website address/files"

then this will make sense:

<a href="javascript:setSong('.$stream["url"].');">

Here:

<script type="text/javascript">
function setSong(songurl){
var theDiv = document.getElementById('player');
theDiv.setAttribute('src', songurl);
document.getElementById('player').play();
}
</script>

You put songurl, shouldn't it be just url because you are using $stream["url"]?

Edited by LastMitch because: grammer
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.