Having problems starting audio. #43

alexanderjhs · 2018-02-07T21:43:11Z

I cannot start the API from PHP If I place jquery and all the other scripts in the end of my body html. So It has to be above the php script for audio/quran to work. Do you know what causes this problem?

iBasit · 2018-02-08T16:45:05Z

Can you post your code here please.

alexanderjhs · 2018-02-16T01:18:36Z

<!doctype html>

<!-- Custom CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
<!-- IonIcons CSS -->
<link rel="stylesheet" href="assets/css/ionicons.css">

<link rel="stylesheet" href="assets/css/_staged-donations.scss">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link src="assets/fonts/ionicons.eot">
<link src="assets/fonts/ionicons.svg">
<link src="assets/fonts/ionicons.ttf">
<link src="assets/fonts/ionicons.woff">

<title>Skien Moske</title>

<!-- Top bar -->
<div id="top-bar">
    <div class="container">
        <div class="top-bar-left">
            <div class="navbar-logo">
               <a href="#" class="navbar-brand">
               Skien Moske
               </a>
            </div>
        </div>
        <div class="top-bar-right">
            <ul class="navbar-nav">
                <li class="nav-item phone-number">
                    <a href="tel:+4748353605" class="nav-link"><i class="ion-ios-telephone"> +47 483 53 605</i></a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link btn btn-primary" href="lyd.php" target="_blank"><i class="ion-ios-musical-notes"> Hør På Koranen</i></a>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- End of Top bar -->

<!-- Nav -->
<nav class="navbar navbar-expand-md navbar-light fixed-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="index.html">Forsiden</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Tjenester
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="ekteskap.html">Ekteskap</a>
                    <a class="dropdown-item" href="undervisning.html">Undervisning</a>
                    <a class="dropdown-item" href="skolebesok.html">Skolebesøk</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Utdannelse</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Multimedia
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="bilde.html">Bilde</a>
                    <a class="dropdown-item" href="video.html">Video</a>
                </div>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Nedlastning
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="litteratur.html">Islamsk litteratur på norsk</a>
                    <a class="dropdown-item" href="lenker.html">Nyttige Lenker</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="nyhetsarkiv.html">Nyhetsarkiv</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Om Oss
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="about.html">Om Oss</a>
                    <a class="dropdown-item" href="kontakt.html">Kontakt oss</a>
                </div>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="donasjon.html">Donasjon</a>
            </li> 
        </ul>
    </div>
</nav>
<!-- End of Nav -->
<div class="ekt-left">
    <div class="container">
        <div class="row no-gutters">
            <div class="col">
                <div class="ekt-left-body">
                    <h3>Quran</h3>
                    <div class="style-three"></div>
                    <?php

################## DO NOT EDIT BELOW THIS ###################################
if (!$api_url)
{
die('missing vaules, please fill the configuration values and try again!');
}
$_REQUEST['apiKey'] = $api_key;
$urlstring = NULL;
build_string($_REQUEST, $urlstring);
$ch = curl_init($api_url);
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_POST, 0);
curl_setopt($ch, CURLOPT_POSTFIELDS, $urlstring);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$data = curl_exec($ch);
curl_close($ch);
print $data;
function build_string ($array, &$urlstring)
{
foreach ($array as $key => $value)
{
if (is_array($value))
{
foreach ($value as $key2 => $value2)
{
$urlstring .= $key . '[' . $key2 . ']=' . $value2 . '&';
}
}
else
$urlstring .= "$key=$value&";
}
}
?>

                </div>
            </div>
        </div>
    </div>
</div>


<hr class="style-two">
<!-- FOOTER -->
<div id="footer-wh-body">
    <footer>
        <div class="container">
           <br>
            <div class="footer-body row">
                <div class="left col-6">
                    <ul class="navbar-nav">
                        <h3>Snarvei linker</h3>
                        <div class="style-three"></div>
                        <li class="nav-item">
                            <a href="ekteskap.html" class="nav-link" title="Ekteskap">Tjenester</a>
                        </li>
                        <li class="nav-item">
                            <a href="utdannelse.html" class="nav-link" title="Utdannelse">Utdannelse</a>
                        </li>
                        <li class="nav-item">
                            <a href="bilde.html" class="nav-link" title="Bilde">Multimedia</a>
                        </li>
                        <li class="nav-item">
                            <a href="litteratur.html" class="nav-link" title="Nedlastning">Nedlastning</a>
                        </li>
                        <li class="nav-item">
                            <a href="nyhetsarkiv.html" class="nav-link" title="Nyhetsarkiv">Nyhetsarkiv</a>
                        </li>
                        <li class="nav-item">
                            <a href="about.html" class="nav-link" title="Om Oss">Om Oss</a>
                        </li>
                        <li class="nav-item">
                            <a href="donasjon.html" class="nav-link" title="Donasjon">Donasjon</a>
                        </li>
                    </ul>
                </div>

                <div class="right col-6">
                    <h3>Finn veien til oss</h3>
                    <div class="style-three"></div>
                    <div id="map"></div>
                </div>
            </div>
        </div>
    </footer>
    <span class="hr"></span>
    <div class="container">
        <div class="bottom-footer row">
            <div class="bottom-left col">
                <p>&copy; Skien Moske 2018 &middot; Made By &#10084; For <span style="font-size: 20pt;">&#65010;</span></p>
            </div>

            <div class="bottom-right col float-right">
                <div class="fb-like" data-href="https://www.facebook.com/SkienMoske/" data-width="200px" data-layout="standard" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>
            </div>
        </div>
    </div>
</div>

    
<!-- Bønnetider Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <img src="assets/img/bonnetider.jpg" alt="Bønnetider">
            </div>
            <div class="">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Lukk den!</button>
            </div>
        </div>
    </div>
</div><!-- End of Modal -->

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvjWfYsQHQr34LeagdArzu8NQwppPRKBY&callback=initMap">
</script>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<!-- Custom JS -->
<script src="assets/js/style.js" type="text/javascript"></script>
<script src="assets/js/jquery.easyPaginate.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>


</body>

alexanderjhs · 2018-02-16T01:21:50Z

This is my code. I did a shortcut on it. And It was to display the Quran in another page without jQuery and so on. Looks like that this API doesn't work well with jQuery. Tried to modify jQuery, and tried to modify this API aswell. But nothing seemed to work :) Sorry for late answer, did not see that you had commented.

iBasit · 2018-02-16T12:15:16Z

There might be a conflict between jQuery versions and legacy code. The complete application is based on jQuery jQuery v1.11.1 — if you want to use latest jQuery, then you would have to update few functions, which they have removed, but I would recommend to use old jQuery, unless you are doing something really new which old does not support.

ATouhou · 2018-02-16T14:30:52Z

I think the confusion is somewhere else.
Can you please explain your problem exactly with screenshots and add the code to gists or something with proper formating Alexander :-)

alexanderjhs · 2018-02-17T18:12:52Z

alexanderjhs · 2018-02-17T18:14:34Z

The top bar supposed to be like that last image. But everything changes with the jquery when I put the php in there. Tried to do some tricks with CSS to fix all the wrongness in there, but still I do not feel comfortable

ATouhou · 2018-02-18T14:28:07Z

I don't exactly understand your question, but I don't think it is related to the API, but something fundamental about HTML/JavaScript.

You want the audio player in a fixed top location unless the person is on a certain place on the screen?

iBasit · 2018-02-18T14:54:41Z

It's a CSS issue.

There are two ways to solve this.

Use Iframe to display Quran directly from GlobalQuran.com
remove GlobalQuran CSS and add your own CSS (better to make modifications on GlobalQuran CSS)

alexanderjhs · 2018-02-22T08:05:50Z

ATouhou Thanks for tip.

And iBasit thanks very much for the tips. I could use iframe but I want the site to be more proffesional. You know what, I havent thought of removing CSS
Thanks again :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Having problems starting audio. #43

Having problems starting audio. #43

alexanderjhs commented Feb 7, 2018

iBasit commented Feb 8, 2018

alexanderjhs commented Feb 16, 2018

alexanderjhs commented Feb 16, 2018

iBasit commented Feb 16, 2018

ATouhou commented Feb 16, 2018

alexanderjhs commented Feb 17, 2018

alexanderjhs commented Feb 17, 2018

ATouhou commented Feb 18, 2018

iBasit commented Feb 18, 2018

alexanderjhs commented Feb 22, 2018

Having problems starting audio. #43

Having problems starting audio. #43

Comments

alexanderjhs commented Feb 7, 2018

iBasit commented Feb 8, 2018

alexanderjhs commented Feb 16, 2018

alexanderjhs commented Feb 16, 2018

iBasit commented Feb 16, 2018

ATouhou commented Feb 16, 2018

alexanderjhs commented Feb 17, 2018

alexanderjhs commented Feb 17, 2018

ATouhou commented Feb 18, 2018

iBasit commented Feb 18, 2018

alexanderjhs commented Feb 22, 2018