Attempting to play media file from Google Maps event listener

Question

0.00/5 (No votes)

See more:

, +

I am attempting to play a sound from a custom marker on Google Maps, I am pulling in the longitude, latitude and the audio file name from my database and I am trying to play the corresponding audio file from my directory when the marker is clicked, here is what I have so far.

XML

<!DOCTYPE html>
    <html>
    <head>

    <meta charset="UTF-8">

    <title>Audio Capture - Home</title>

    <link rel="stylesheet" href="css/style.css">

    <style>
      #map-canvas {
        width: 500px;
        height: 400px;
        background-color: #CCC;
      }
    </style>
    <script type="text/javascript"          src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="/audiojs/audio.min.js"></script>
    <script>
    audiojs.events.ready(function() {
    var as = audiojs.createAll();
    });
    </script>
    <script type="text/javascript">
    //<![CDATA[

    var customIcons = {
      latitude: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
      },
      bar: {
        icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };


    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(37.422005, -122.084095),
        zoom: 13,
        mapTypeId: 'roadmap'

      });

      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
      downloadUrl("phpsqlajax_genxml.php", function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var audiotag = markers[i].getAttribute("audiotag");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("latitude")),
              parseFloat(markers[i].getAttribute("longitude")));
          var html = audiotag;
          //var icon = customIcons[latitude] || {};
          var iconBase =   'http://labs.google.com/ridefinder/images/mm_20_blue.png';


          var marker = new google.maps.Marker({
            map: map,
            position: point,
            icon: iconBase
          });
          bindInfoWindow(marker, map, infoWindow, html);

        }
      });
    }``

    function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker);
        var audio = new Audio('http://192.168.0.2/AudioCapture/uploads/' + html )
        audio.play();
        //<audio src="/uploads/" preload="auto" />
      });
    }

    function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
          new ActiveXObject('Microsoft.XMLHTTP') :
          new XMLHttpRequest;

      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          request.onreadystatechange = doNothing;
          callback(request, request.status);
        }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}


    //]]>

  </script>
</head>
<div class="login">

     <body onload="load()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>

</div>
</html>

In the BindInfoWindow that is where I am trying to select the file path plus the audio tag afterwards.

The audiotag (which is the the file name) shows in the infowindow but no sound plays, ideally a small media player with pause, play and the length would show.

Another idea I had would be to pass that file name from the info window outside of the Google map into a separate media player? However, I'm unsure how to do this.

Any help would be appreciated, thank you.

Posted 11-Apr-15 4:11am

Member 11598975

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)