jquery and audio embedding

  • Resolved The One

    (@the-one-1)


    9 years, 10 months ago

    I’m trying to use the CSS & Javascript Toolbox plugin to add javascript to my main page that plays audio, but it isn’t working, i.e the audio does not play. When I go to view-source:https://blog.systechforum.net/ and search for CSS & Javascript Toolbox I don’t see it which I guess means the plugin isn’t active. I have tried using the code in the Java script input and HTML input. My blog is blog.systechforum.net Here is the code I am using:

    <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg" style="display: none;">
</audio>
<div id="playing" style="display: none;">
</div>
<script>
var audio;
var playlist;
var tracks;
var current;
var musicarr = ["https://www.systechforum.net/images/siteaudio.mp3",
                "https://www.systechforum.net/images/siteaudio2.mp3",
                "https://www.systechforum.net/images/siteaudio3.mp3",
                "https://www.systechforum.net/images/siteaudio4.mp3",
                "https://www.systechforum.net/images/siteaudio5.mp3",
                "https://www.systechforum.net/images/siteaudio6.mp3",
                "https://www.systechforum.net/images/siteaudio7.mp3",
                "https://www.systechforum.net/images/siteaudio8.mp3",
                "https://www.systechforum.net/images/siteaudio9.mp3",
                "https://www.systechforum.net/images/siteaudio10.mp3",
                "https://www.systechforum.net/images/siteaudio11.mp3",
                "https://www.systechforum.net/images/siteaudio12.mp3",
                "https://www.systechforum.net/images/siteaudio13.mp3",
                "https://www.systechforum.net/images/siteaudio14.mp3",];
shuffle(musicarr);

init();
function init(){
    current = 0;
    audio = $('audio');
    audio[0].volume = .20;
    len = musicarr.length;

    run(musicarr[current], audio[0]);

}

function run(link, player){
        player.src = link;
        audio[0].load();
        audio[0].play();
        $('#playing').html("<ul><li><a>" + link+ "</a></li></ul>");
}

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
</script>

    I have code for MP3 as well. That is just ogg. Can someone tell me how to use this code? TIA!

    https://www.ads-software.com/plugins/css-javascript-toolbox/

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter The One

    (@the-one-1)

    Anyone?

    Plugin Author wipeoutmedia

    (@wipeoutmedia)

    Hey The One,

    Sorry for the delay in getting back to you.
    You can create a new code block and then add this code here:

    <script type='text/javascript' src='https://code.jquery.com/jquery-1.7.js'></script>

<style type='text/css'>
    #playing,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}
</style>

<script type='text/javascript'>
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

var musicarr = ["https://www.systechforum.net/images/siteaudio.mp3",
                "https://www.systechforum.net/images/siteaudio2.mp3",
                "https://www.systechforum.net/images/siteaudio3.mp3",
                "https://www.systechforum.net/images/siteaudio4.mp3",
                "https://www.systechforum.net/images/siteaudio5.mp3",
                "https://www.systechforum.net/images/siteaudio6.mp3",
                "https://www.systechforum.net/images/siteaudio7.mp3",
                "https://www.systechforum.net/images/siteaudio8.mp3",
                "https://www.systechforum.net/images/siteaudio9.mp3",
                "https://www.systechforum.net/images/siteaudio10.mp3",
                "https://www.systechforum.net/images/siteaudio11.mp3",
                "https://www.systechforum.net/images/siteaudio12.mp3",
                "https://www.systechforum.net/images/siteaudio13.mp3",
                "https://www.systechforum.net/images/siteaudio14.mp3",];
shuffle(musicarr);

init();
function init(){
    current = 0;
    audio = $('audio');
    audio[0].volume = .40;
    len = musicarr.length;

    run(musicarr[current], audio[0]);

    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
        }
        run(musicarr[current],audio[0]);
    });
}

function run(link, player){
        player.src = link;
        audio[0].load();
        audio[0].play();
        $('#playing').html("<ul><li><a>" + link+ "</a></li></ul>");
}

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
});
</script>

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
</audio>
<div id="playing">
</div>

    Then use the CJT shortcode embedder button to add it to the page or post.
    Alternatively, if you have called your code block Audio, then you would use the shortcode:
    [cjtoolbox name=’Audio’]

    Hope that helps.

    Kind Regards,
    Damian

    Plugin Author wipeoutmedia

    (@wipeoutmedia)

    By the way, the code I provided will display the player. After clicking into your site, it looks like you manage to solve it and I notice you don’t display the player, which is probably what you wanted anyway.

    Thread Starter The One

    (@the-one-1)

    I am just using HTML 5 right now with only one audio clip. I would like the player hidden and play mp3 and ogg with a random clip.

    Plugin Author wipeoutmedia

    (@wipeoutmedia)

    From what I see:
    https://www.systechforum.net/
    your player is hidden and it is already playing clips randomly on each page refresh.

    Thread Starter The One

    (@the-one-1)

    That’s not my blog. The blog is located at https://blog.systechforum.net/

    That link takes you to my phpBB forum.

    Thread Starter The One

    (@the-one-1)

    I used the wrong link. The blog is a subdomain

    Plugin Author wipeoutmedia

    (@wipeoutmedia)

    Use this code instead as it should hide the player.

    <script type='text/javascript' src='https://code.jquery.com/jquery-1.7.js'></script>

<style type='text/css'>
    #playing, audio { display: none; }
</style>

<script type='text/javascript'>
$(window).load(function(){
var audio;
var playlist;
var tracks;
var current;

var musicarr = ["https://www.systechforum.net/images/siteaudio.mp3",
                "https://www.systechforum.net/images/siteaudio2.mp3",
                "https://www.systechforum.net/images/siteaudio3.mp3",
                "https://www.systechforum.net/images/siteaudio4.mp3",
                "https://www.systechforum.net/images/siteaudio5.mp3",
                "https://www.systechforum.net/images/siteaudio6.mp3",
                "https://www.systechforum.net/images/siteaudio7.mp3",
                "https://www.systechforum.net/images/siteaudio8.mp3",
                "https://www.systechforum.net/images/siteaudio9.mp3",
                "https://www.systechforum.net/images/siteaudio10.mp3",
                "https://www.systechforum.net/images/siteaudio11.mp3",
                "https://www.systechforum.net/images/siteaudio12.mp3",
                "https://www.systechforum.net/images/siteaudio13.mp3",
                "https://www.systechforum.net/images/siteaudio14.mp3",];
shuffle(musicarr);

init();
function init(){
    current = 0;
    audio = $('audio');
    audio[0].volume = .40;
    len = musicarr.length;

    run(musicarr[current], audio[0]);

    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
        }
        run(musicarr[current],audio[0]);
    });
}

function run(link, player){
        player.src = link;
        audio[0].load();
        audio[0].play();
        $('#playing').html("<ul><li><a>" + link+ "</a></li></ul>");
}

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}
});
</script>

<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
</audio>
<div id="playing">
</div>
    Thread Starter The One

    (@the-one-1)

    I added that code using the javescript input option. Under advanced/URLs I put https://blog.systechforum.net/ I saved and activated. No audio is playing. I changed from header to footer and still no audio.

    When I view source with this query I don’t see the plug-in. view-source:https://blog.systechforum.net/

    Thread Starter The One

    (@the-one-1)

    I’m uninstalling and reinstalling

    Thread Starter The One

    (@the-one-1)

    Good news I got it to work however it works on the posts page and I would like it on the main page only and one play the track once and upon reload play a new random track. That’s how I have it set up in the phpBB forum the fist link I gave.

    Plugin Author wipeoutmedia

    (@wipeoutmedia)

    Great to hear that you got it to work.

    There may be an issue with the Advance –> URLs section. I will need to investigate this further. It is late now, and I will have to look into this another time.

    Thanks,
    Damian

    Thread Starter The One

    (@the-one-1)

    Found the index under auxiliary. Now I just need the audio to play once and upon reload pick a random track.

    Thread Starter The One

    (@the-one-1)

    Looks like I figured it out! I deleted the code, ` audio[0].addEventListener(‘ended’,function(e){
    current++;
    if(current == len){
    current = 0;
    }
    run(musicarr[current],audio[0]);
    });`

    and now it plays once and stops.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘jquery and audio embedding’ is closed to new replies.