EzDevInfo.com

Error loading: "undefined" when using audio.js with Opencart to show audio playlist

im trying to integrate a mp3 module into my opencart store using audio.js from http://kolber.github.io/audiojs/demos/test6.html. so i followed the steps mentioned in http://forum.opencart.com/viewtopic.php?t=80116&p=372808 the code was buggy so i fixed it.

But the problem is when i load the page i get the below error

Error loading: "undefined"

when i click on a song in the playlist and click on the player it plays the song. but it still says undefined.

it actually should be like

below is the code header.tpl

 <script src="/js/audiojs/audio.min.js"></script>
       <script>
              $(function() {
                // Setup the player to autoplay the next track
                var a = audiojs.createAll({
                  trackEnded: function() {
                    var next = $('ol li.playing').next();
                    if (!next.length) next = $('ol li').first();
                    next.addClass('playing').siblings().removeClass('playing');
                    audio.load($('a', next).attr('data-src'));
                    audio.play();
                  }
                });

            // Load in the first track
            var audio = a[0];
                first = $('ol a').attr('data-src');
            $('ol li').first().addClass('playing');
            audio.load(first);

            // Load in a track on click
            $('ol li').click(function(e) {
              e.preventDefault();
              $(this).addClass('playing').siblings().removeClass('playing');
              audio.load($('a', this).attr('data-src'));
              audio.play();
            });
            // Keyboard shortcuts
            $(document).keydown(function(e) {
              var unicode = e.charCode ? e.charCode : e.keyCode;
                 // right arrow
              if (unicode == 39) {
                var next = $('li.playing').next();
                if (!next.length) next = $('ol li').first();
                next.click();
                // back arrow
              } else if (unicode == 37) {
                var prev = $('li.playing').prev();
                if (!prev.length) prev = $('ol li').last();
                prev.click();
                // spacebar
              } else if (unicode == 32) {
                audio.playPause();
              }
            })
          });
        </script>

in product.tpl

  <?php // Start of player ?>
        <?php if ($attribute_groups) { ?>
 <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
          <?php if ($attribute_group['name'] == 'Demo Tracks') { ?>

            <div class="player">
              <audio preload></audio>
                <ol>
                  <?php foreach ($attribute_group['attribute'] as $attribute) { ?>
                    <?php //split name
                       $track = strtok($attribute['text'],"~");
                    ?>
                    <?php while ($track !== false) {
                      // probably a better way, but put the 2 into diff vars
                      $track_url = $track;
                      $track = strtok('~');
                      $track_desc = $track;
                      $track = strtok('~');
                    ?>.
                    <li>
                      <a rel='nofollow' href="#" data-src="<?php echo html_entity_decode($track_url); ?>"><?php echo $track_desc ?>
                    <?php } // end while ?>
                  <?php  } // end foreach?>
                </ol>
              </div>
            <?php } //if attribute_group ?>
 <?php }  ?>
          <?php } //if attribute ?>

any help will be appreciated.

jQuery and Audio.js: song dynamically added to playlist not playing or recognizing

I have been using audio.js to make dynamic playlist. When a user clicks on a link in an Un-Ordered List, it is added to a Ordered list (<ol>) that servers a the audio players playlist.

I have the jQuery working, adding the new list item from the Un-Ordered list to the Ordered list. However, the player does not play the newly-added song when clicked, and it doesn't go to it as the next track.

The audio player only plays the songs that were initially in its playlist when the website was loaded, but does not recognize the songs I have added after loading. Any help?

Here is a link to the audio.js example playlist: http://kolber.github.io/audiojs/demos/test6.html

Here is a link to my version with jQuery-added songs: http://tinyurl.com/kg9clpb

Audio.js Demo Source Code for setting up player:

<script>
 $(function() { 
 // Setup the player to autoplay the next track
    var a = audiojs.createAll({
      trackEnded: function() {
        var next = $('ol li.playing').next();
        if (!next.length) next = $('ol li').first();
        next.addClass('playing').siblings().removeClass('playing');
        audio.load($('a', next).attr('data-src'));
        audio.play();
      }
    });

    // Load in the first track
    var audio = a[0];
        first = $('ol a').attr('data-src');
    $('ol li').first().addClass('playing');
    audio.load(first);

    // Load in a track on click
    $('ol li').click(function(e) {
      e.preventDefault();
      $(this).addClass('playing').siblings().removeClass('playing');
      audio.load($('a', this).attr('data-src'));
      audio.play();
    });
    // Keyboard shortcuts
    $(document).keydown(function(e) {
      var unicode = e.charCode ? e.charCode : e.keyCode;
         // right arrow
      if (unicode == 39) {
        var next = $('li.playing').next();
        if (!next.length) next = $('ol li').first();
        next.click();
        // back arrow
      } else if (unicode == 37) {
        var prev = $('li.playing').prev();
        if (!prev.length) prev = $('ol li').last();
        prev.click();
        // spacebar
      } else if (unicode == 32) {
        audio.playPause();
      }
    })
  });
 </script>

HTML for Aud-oplayer and Both lists:

  <audio ></audio>
  <h2>Playlist</h2>
  <ol id="userPlaylist">
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">dead wrong intro</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3">islands is the limit</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3">one more chance for a heart to skip a beat</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3">suicidal fantasy</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/07-everyday-shelter.mp3">everyday shelter</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/08-basic-hypnosis.mp3">basic hypnosis</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li>
    <li><a rel='nofollow' href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li>
  </ol>
  <h3>Songs Not it Playlist - Click to add to Playlist</h3>
  <ul id="mainSite">
  <li><a rel='nofollow' href="#" data-src="http://www.jussbuss.tv/testing/sapi/mp3/john-fenton_dive-table.mp3">john-fenton_dive-table</a></li>
  </ul>

My code for adding a song from another list on click:

 <script>
 $("ul#mainSite li").on("click", "a", function(e){

     e.preventDefault();


      var addLink = $(this).attr('data-src');


      $("ol#userPlaylist").append('<li> <a rel='nofollow' href="#" data-src="'+addLink+'">NEW 
          SONG</li>');

     });

 </script>

Audio tag GUI not visible

I have included the audio tag on a page as

<audio src='a.mp3' preload='auto'>
</audio>

but its not working, i can't see anything on the page.

But when i include audiojs as

  <script src="/static/js/audiojs/audio.min.js"></script>
  <script>
    audiojs.events.ready(function() {
      var as = audiojs.createAll();
    });

  </script>

I am left wondering why is that so ?

Audiojs in a Meteor App

I'm using audiojs in a meteor app and am unsure where to put it in directory. Should this go in public? In lib? If I put it in public and then try to do something like the following, I get errors that audiojs isn't defined. If I try to include the script tag (further down), nothing changes. I didn't expect it to though because I think the audio.min.js file is already being loaded by Meteor.

Rendered:

Template.index.rendered = function() {
    audiojs.events.ready(function() {
        var as = audiojs.createAll();
    }
});

Script Tag:

<script src="/audiojs/audio.min.js"></script>

AudioJs player not loading in IE 9 and below

I tried mp3/ogg/wav format also have the same error. But It's working on chrome and firefox

audio.min.js file = http://codeviewer.org/view/code:42ed

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="./audiojs/audio.min.js"></script>
<script>
  audiojs.events.ready(function() {
    audiojs.createAll();
  });
</script>
</head>
<body>
<audio src="ace.wav" preload="auto"></audio>
</body>
</html>

Any suggestion for audio player that can support cross browsers(include IE 8/9)? I've been searching around and yet still couldn't find the best solution that can support IE/CHROME/FIREFOX at the same time.

Heroku - ActionView::Template::Error

I adding in my rails app "audiojs" music player (http://kolber.github.com/audiojs/)

on localhost all good and work, but heroku says:

"We're sorry, but something went wrong."

log

ActionView::Template::Error (audiojs/audio.min.js isn't precompiled)

how to solve the problem?

HTML5 audio to start playing from anywhere even when the whole file is not loaded

I'm using audio.js on my page to play mp3s.
Some of the mp3s are over 100MB in size.
For example : I have a 124 MB mp3 file which doesn't load fully - the loader is loading the file slowly due to a slow internet connection. But when I click on the player-bar in the middle, I want it to start playing from there. Is that possible in HTML5 / audiojs ?

PHP Stream MP3 file for audiojs

I have the following code to get the contents of MP3 file

$dir = 'upload/';
$file = $dir."/audio.mp3";

$extension = "mp3";
$mime_type = "audio/mpeg, audio/x-mpeg, audio/x-mpeg-3, audio/mpeg3";

if(file_exists($file)){
    header('Content-type: {$mime_type}');
    header('Content-length: ' . filesize($file));
    header('Content-Disposition: filename="' . $filename);
    header('X-Pad: avoid browser bug');
    header('Cache-Control: no-cache');
    readfile($file);
 }else{
    header("HTTP/1.0 404 Not Found");
}

For playing the file I use audiojs (http://kolber.github.io/audiojs/). My PHP file acts as the data source as a normal MP3 file would do.

audiojs is able to play this MP3 file, But You can visually see the player buffering, but you cannot jump to an already buffered position in the MP3 file. For real MP3 files this is possible.

Why not with PHP files which act as MP3 file? Is PHP or audiojs the reason?

audiojs on cake php issue

I use audio js http://kolber.github.com/audiojs/ for play some mp3.

This works on localhost correctly, when I added this files to cakephp view file it is not working it says.

styleElement is not defined on line 473
else head.appendChild(styleElement);

This returns a js error, files copied to webroot and give the paths audiojs javascript file loaded sucessfully

Also uploaded the all files to correct paths but i can't understand why this giving error.

You can visit the page here: http://epreventions.madcapdan.net/users/loadaudio

Audiojs player. How to make it via div?

I'm new into Javascript (I code in php only) I want to remake this player into DIVs. But I can't understand how to pass DIV blocks to the Audiojs function. Please look at the player. Need an advice.

This is the source http://kolber.github.com/audiojs/demos/test6.html - click here to view the player

    <script>
  jQuery(document).ready(function($) { 
    // Setup the player to autoplay the next track
    var a = audiojs.createAll({
      trackEnded: function() {
        var next = $('#ol #li.playing').next();
        if (!next.length) next = $('#ol #li').first();
        next.addClass('playing').siblings().removeClass('playing');
        audio.load($('a', next).attr('data-src'));
        audio.play();
      }
    });

     var audio = a[0];

    // Load in a track on click
    $('#ol #li').click(function(e) {
      e.preventDefault();
      $(this).addClass('playing').siblings().removeClass('playing');
      audio.load($('a', this).attr('data-src'));
      audio.play();
    });

  });
</script>


    <div id="wrapper">
  <h1>wait what notorious xx <em>(2009)</em></h1>
  <audio preload></audio>

    <div id="ol">
            <span style="float: right;"><a onclick="alert('1')">add</a></span>
            <div id="li"><a data-src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3">play</a></div>

            <span style="float: right;"><a onclick="alert('2')">add</a></span>
            <div id="li"><a data-src="http://s3.amazonaws.com/audiojs/03-its-all-about-the-crystalizabeths.mp3">play 2</a></div>

            <span style="float: right;"><a onclick="alert('3')">add</a></span>
            <div id="li"><a data-src="http://s3.amazonaws.com/audiojs/04-islands-is-the-limit.mp3">play 3</a></div>
        </div>

    </div>

The problem is that I want to put more divs inside of But this script takes the next DOM element.

I think that problem with var next = $('#ol #li.playing').next();

audiojs progress-bar not working when audiojs loading twice

Due to the requirement of my project i have to load audio.js twice. Both of these javascript exist in different folder. If i use both of these the dynamic elements of the audio like progress bar and timer stop working and this happens only in fire fox and not in chrome. Can anyone give me the pointer as to what might be happening?

How to Play 3gpp files with Angular Js App

I have tried ngAudio but it doesn't support 3gpp.

How can Play 3gpp files in my app without asking for any plugin to download?

I Mean to say I'm able to Play mp3, wav files using native audio player.

I want to achieve same for 3gp format too.

Please suggest for any Angular plugin or any idea?

Thanks in Advance.

Audio js Error loading Soundcloud after already playing

While it's fine most of the time, sometimes in the middle of playing a song through audio js linking to a soundcloud file, it'll stop the song and throw up an error:

Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

Any idea what's going on? Let me know if you can recreate the issue: http://www.guttinger.com

How to pass a String in source of ?

I'm doing a music application. I'm trying to create a play method, this method return a string that contains the path that where the music are saved on project, example: mp3/music.mp3.

I need to take the string return of method and pass in source of how can I do this? I think that is using javascript, but I don't know about this language =/ anyone can help me here?

This is my view with the

    <div>
    <script src="Content/audiojs/audio.min.js"></script>

    <audio src=HERE I NEED TO PASS THE PATH FROM MUSIC preload="auto" />
<script>
    audiojs.events.ready(function () {
        var as = audiojs.createAll();

    });
</script>
</div>
<p>
    @Html.ActionLink("Create New", "Create")
</p>

<table>
    <tr>
        <th>
            <span>Genero</span>
        </th>

        <th>
            <span>Nome</span>
        </th>
        <th>
            <span>Artista</span>
        </th>
        <th>
            <span>Preço</span>
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    if (item.UserId == Int32.Parse(Membership.GetUser().ProviderUserKey.ToString()))
    {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.genero.Nome)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Nome)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.NomeArtista)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Preco)
        </td>
        <td>
            @Html.ActionLink("Play", "Play", new { path = item.path }) |
            @Html.ActionLink("Edit", "Edit", new { id=item.MusicaId }) |
            @Html.ActionLink("Download", "Download", new { path = item.path }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.MusicaId })
        </td>
    </tr>
}
}

</table>

When I click on Play, the method will take the path saved on Music model and return a String, I need to take this String and pass in to play the music.

Play Method

 public String play(string path) 
{
  var arquivos = modelMusica.listaMusica();

  string nomeArquivo = (from m in arquivos where m.path == path select m.path).First();

  return nomeArquivo;

}

Thanks for all help provide :D

Audio.js and .ogg on Firefox for Mac

Got a bit of a weird issue. I am using Audio.js to play some audio files.

Across all platforms and all browsers everything works perfectly apart from Firefox for Mac. The files just do not want to play. They download OK and Audio.js outputs thats they have fully downloaded, but will not play. I have tried files uploaded to our cloud storage provider (they stream fine on all the other browsers), the same files served locally and a third party .ogg file found online.

Nothing.

Anyone had issues with .ogg files playing on Firefox for Mac? Would it be a files header issue? Anyone had issues with Audio.js having problems playing .ogg files in FF on a Mac?