w3hello.com logo
Home PHP C# C++ Android Java Javascript Python IOS SQL HTML videos Categories
inserting the src file in dynamically to audio tag and storing src name in html code

I found a solution to this. When loading in the files from a database with php. I store the mp3 and the ogg file directories into two php arrays instead of putting them in a hidden div. Which I then convert into a javascript array and when the corresponding play button is pressed eg btnPlaypause0 then the mp3array[0] source file will be inserted into the source attribute of the audio tag and then played. here's my html/php code:

<?php
    require("music_connect.php");       
    $mp3_php = array();
    $ogg_php = array();
    $result = mysqli_query($con,"SELECT * FROM products");
    if (!$result) {
            printf("Error: %s
", mysqli_error($con));
            exit();
    }

    while($row = mysqli_fetch_array($result)){
        array_push($mp3_php, $row['Productmp3']);
        array_push($ogg_php, $row['ProductOgg']);
    }

?>

    <?php

    $result = mysqli_query($con,"SELECT * FROM products");
    if (!$result) {
            printf("Error: %s
", mysqli_error($con));
            exit();
    }
    echo "<ul id='audio_list'>";
    $x = 0;
        while($row = mysqli_fetch_array($result)){

            echo "<li class='gradient_blackblue'>
            <div class='audio_controls_area'>
                <div id='timer" . $x . "' class='timer_style
timer_small'></div>
                <div class='circle'></div>
                <div class ='play_pause'>
                <div class='play button_style' id='btnPlayPause" . $x .
"'><i class='fa fa-play'></i></div> 
                </div>

            </div>
            <div class='audio_description'>" . $row['ProductName'] .
"
                <div class='artist'>" . $row['ProductArtist'] .
"</div>
                <div id='slider_area'>
                <span id='songTime" . $x . "'
class='songTime'>0:00</span>
                <input id='slider" . $x . "' class='slider' type='range'
min='0' value='0' />
                </div>

            </div>
            <a href='electro_soundz.php'><i class='fa
fa-chevron-right'></i></a>
            </li>";
            $x++;

        }
    echo "</ul>";
    mysqli_close($con);
    ?>


<audio id ='audio_player'>
<source id='src_mp3' type='audio/mp3'/>
<source id='src_ogg' type='audio/ogg'/>
<object id='audio_object' type='audio/x-mpeg' width='200px'
height='45px' >
        <param id = 'param_src' name='src'/>
        <param name='autoplay' value='false' />
        <param name='autostart' value='false' />
    </object>
</audio>

and javascript:

    <script>

        var player;
        var intv;
        var slider;
        var songTime;
        var max;
        var duration;

        //init
        window.onload = function(){

            player = document.getElementById('audio_player');

            window.mp3_array= <?php echo json_encode($mp3_php); ?>;
            window.ogg_array= <?php echo json_encode($ogg_php); ?>;
            var mp3_length = window.mp3_array.length;
                for(var i=0;i<mp3_length;i++){
            listenForI(i);
                }
            console.log(window.mp3_array);
            console.log(window.ogg_array);

        }
        function listenForI(i){
            document.getElementById('btnPlayPause' +
i).addEventListener('click', function() { songSelect(i); }, false);
        }
        function playMusic(songTime, button){
    player.play();
    intv = setInterval(function() { update(songTime, button); }, 100);
}


function pauseMusic(){
    player.pause();
    clearInterval(intv);
}

function stopMusic(){
    player.pause();
    player.currentTime = 0;
    clearInterval(intv);
}

function reposition(){
    var reposition_value = $(slider).val();
    player.currentTime = reposition_value;

}

function update(songTime, button){
    document.getElementById(songTime).innerHTML =
millisToMins(player.currentTime);
    $(slider).val(player.currentTime);
    var current = player.currentTime;
    var degreeCurrent = (window.degreePerSecond*current);
    $(window.timer).css({
    '-webkit-transform':'rotate(' + degreeCurrent + 'deg)',
    '-moz-transform': 'rotate(' + degreeCurrent + 'deg)',
    '-ms-transform': 'rotate(' + degreeCurrent + 'deg)',
    '-o-transform' : 'rotate(' + degreeCurrent + 'deg)',
    'transform' : 'rotate(' + degreeCurrent + 'deg)'
    });

    if ((player.duration > 0) && (player.currentTime==
player.duration)){
        $(button).addClass("play").removeClass("isPlaying");
        $(button).children("i").addClass("fa-play").removeClass("fa-stop");
        $(window.timer).removeClass('timer');
        $(window.timer).removeAttr('style');
        stopMusic();    
    }

}

function millisToMins(seconds){
    var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) /
60);
    var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
    if (numseconds >= 10){
        return numminutes + ":" + Math.round(numseconds);
    }else{
        return numminutes + ":0" + Math.round(numseconds);
    }
}

function songSelect(x){
    $(window.timer).removeClass('timer');
    $(window.timer).removeAttr('style');
    clearInterval(intv);
    var button = '#' + 'btnPlayPause' + x;
    if($(button).hasClass("isPlaying")){
        pauseMusic();
        $(button).addClass("play").removeClass("isPlaying");
        $(button).children("i").addClass("fa-play").removeClass("fa-stop");
    }else if($(button).hasClass("play")){
        var mp3 = window.mp3_array[x];
        var ogg = window.ogg_array[x];
        $('#src_mp3').attr('src', mp3);
        $('#src_ogg').attr('src', ogg);
        $('#audio_object').attr('data', mp3);
        $('#param_src').attr('value', mp3);
        console.log($('#audio_player').html());
        player.load();
        songTime = 'songTime' + x;
        window.timer = '#timer' + x;
        slider = '#slider' + x;
        $(slider).on('change', reposition);
        $(player).on("loadeddata", function(){
            window.duration = player.duration;
            $(slider).attr('max', window.duration);
            window.degreePerSecond = 360/window.duration;
            $(window.timer).addClass('timer');
            $('.timer_style.timer').css({
                'display':'block'

            });
        });
        playMusic(songTime, button);
        $("div").addClass("play").removeClass("isPlaying");
        $("div").children("i").addClass("fa-play").removeClass("fa-stop");
        $(button).children("i").removeClass("fa-play").addClass("fa-stop");
        $(button).removeClass("play").addClass("isPlaying");    
    }
}




    </script>




© Copyright 2018 w3hello.com Publishing Limited. All rights reserved.