• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 69
  • Last Modified:

Add Array

Hi, Experts

If I have 10 different buttons and each button will have its own image link and sound link, how to add array to the following JS and Style. Thanks

Header

	<script>
		var audio, playbtn
		function initAudioPlayer(){
			audio = new Audio();
			audio.src = "SampleAudio_0.7mb.mp3";
			audio.loop = false;
			//audio.play();
			// Set object references
			playbtn = document.getElementById("playpausebtn");

			// Add Event Handling
			playbtn.addEventListener("click",playPause);

			// Functions
			function playPause(){
				if(audio.paused){
					audio.play();
					playbtn.style.background = "url(http://dummyimage.com/200x200/ccc/000.jpg&text=pause) no-repeat";

				} else {
					audio.pause();
				   playbtn.style.background = "url(http://dummyimage.com/200x200/ccc/000.jpg&text=play) no-repeat";

				}
			}
		}
		window.addEventListener("load", initAudioPlayer);
	</script>
	<style>
		button{ border:none; cursor:pointer; outline:none; }
		button#playpausebtn {
			background:url('http://dummyimage.com/150x150/ccc/000.jpg&text=play') no-repeat;
			width:200px;
			height:200px;
			color: white;
			content: "\f522";
			background-size: contain;
			padding: 0;
			margin: 0;
			float: left;
		}
	</style>

Open in new window


Body

<button id="playpausebtn"></button>	

Open in new window

0
Brian Lin
Asked:
Brian Lin
  • 15
  • 12
  • 5
5 Solutions
 
Julian HansenCommented:
Can you give us a bit more information.

From your post I am guessing you want 10 buttons linked to different audio players - is that correct?

The code you have posted appears to be for customising controls for a single audio player.

Can you paint us a picture of how this is going to work.
1
 
Brian LinDesignerAuthor Commented:
Hi, expert

You are right, the example i provide is only for one audio player.  Here is the example DEMO

I would like to have 10 players in one page :) cheers
0
 
HainKurtSr. System AnalystCommented:
not sure, but I created a demo, but of course not working :)

https://jsfiddle.net/rspvw9k2/
1
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Brian LinDesignerAuthor Commented:
Thanks, HK... Seems working for me :) Is it possible to have 10 different background as well ? Cheers
0
 
HainKurtSr. System AnalystCommented:
by saying "not working" I mean I dont have mp3 files and it is not playing in jsFiddle...

check this to see how to set background image using jQuery...

https://jsfiddle.net/a46b1wan/
0
 
HainKurtSr. System AnalystCommented:
or check this, I added images to array, so it is a bit more flexible to set it up...

https://jsfiddle.net/t7a5m967/

var mp3 = [{
  song: "SampleAudio_1.mp3",
  image: "http://dummyimage.com/200x200/ccc/001.jpg"
},...

Open in new window

0
 
Julian HansenCommented:
Here is a stab at it
CSS
<style type="text/css">
.btni,
.btng  {
  background: url(images/foreground2.png);
  background-size: cover;
}
.btne,
.btnc  {
  background: url(images/foreground1.png);
  background-size: cover;
}
.btnj,
.btna {
  background: url(images/foreground3.png);
  background-size: cover;
}
.btnh,
.btnf{
  background: url(images/foreground4.png);
  background-size: cover;
}
.btnd,
.btnb {
  background: blue;
}
</style>

Open in new window

HTML
<div class="audio-btns"></div>

Open in new window

Data
<script>
var data = [{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3726.mp3',
  class: 'btna',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3705.mp3',
  class: 'btnb',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3720.mp3',
  class: 'btnc',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3721.mp3',
  class: 'btnd',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3727.mp3',
  class: 'btne',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3722.mp3',
  class: 'btnf',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3710.mp3',
  class: 'btng',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3739.mp3',
  class: 'btnh',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/18.mp3',
  class: 'btni',
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/13.mp3',
  class: 'btnj',
}];
</script>

Open in new window

jQuery
<script>
$(function() {
  $.each(data, function(i, e) {
    // CREATE AUDIO CONTROL
    var audio = new Audio();
    audio.src = e.src;
    var bank = $('.audio-btns');
	
	// CREATE BUTTON
    var btn = $('<button>', {class: 'btn ' + e.class}).html('&nbsp');
	
	// ADD AUDIO TO BUTTON
    btn.data('audio', audio);
	
	// ADD BUTTON TO CONTAINER
    bank.append(btn);
  });
  
  // CLICK HANDLER FOR BUTTON
  $('.audio-btns').on('click','.btn', function(e) {
    e.preventDefault();
    var audio = $(this).data('audio');
    if (audio.paused) audio.play()
    else audio.pause();
  });
});
</script>

Open in new window


Working sample here
1
 
Brian LinDesignerAuthor Commented:
Thanks Julian Hansen.  Is it possible to load a different image when hover over the buttons ? and have a button that will stop all the sounds at once... and loop the sound until click the button again to stop it :)
0
 
Julian HansenCommented:
Working on it
0
 
Julian HansenCommented:
Updated sample here

This takes a slightly different approach. Your background and hover are specified as an index into a sprite.

Audio controls are added to an array and set to loop by default.

There is a stop all button which iterates over the control array to issue the .pause() call when Stop All is pressed.
CSS
<style type="text/css">
.btn.audio 
{
  width: 75px;
  height: 75px;
  background-color: transparent;
  background-image: url(images/audio-sprite.75x75.png);
  background-repeat: no-repeat;
}
</style>

Open in new window

HTML
<div class="audio-btns"></div>
<button class="btn btn-primary" id="stop">Stop All</button>

Open in new window

Data
<script>
var data = [{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3726.mp3',
  class: 'btna',
  background: 0,
  hover: 1
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3705.mp3',
  class: 'btnb',
  background: 1,
  hover: 2
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3720.mp3',
  class: 'btnc',
  background: 2,
  hover: 3
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3721.mp3',
  class: 'btnd',
  background: 3,
  hover: 4
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3727.mp3',
  class: 'btne',
  background: 4,
  hover: 0
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3722.mp3',
  class: 'btnf',
  background: 0,
  hover: 1
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3710.mp3',
  class: 'btng',
  background: 1,
  hover: 2
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/3739.mp3',
  class: 'btnh',
  background: 2,
  hover: 3
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/18.mp3',
  class: 'btni',
  background: 3,
  hover: 4
},{
  src: 'http://www.noiseaddicts.com/samples_1w72b820/13.mp3',
  class: 'btnj',
  background: 4,
  hover: 0
}];
</script>

Open in new window

jQuery
<script>
var controls = [];
$(function() {
  $.each(data, function(i, e) {
    // CREATE AUDIO CONTROL
    var audio = new Audio();
    audio.src = e.src;
    audio.loop = true;
    controls.push(audio);
    var bank = $('.audio-btns');
  
    // CREATE BUTTON
    var btn = $('<button>', 
    {class: 'btn audio ' + e.class})
    .html('&nbsp')
    .css({backgroundPosition: '0 -' + (e.background * 75) + 'px'})
    .on('mouseover', function() {
      $(this).css({backgroundPosition: '0 -' + (e.hover * 75) + 'px'});
    })
    .on('mouseout', function() {
      $(this).css({backgroundPosition: '0 -' + (e.background * 75) + 'px'});
    })
  
    // ADD AUDIO TO BUTTON
    btn.data('audio', audio);
  
    // ADD BUTTON TO CONTAINER
    bank.append(btn);
  });
  
  $('#stop').click(function() {
    for(var i = 0; i < controls.length; i++) {
      controls[i].pause();
    }
  })
  
  // CLICK HANDLER FOR BUTTON
  $('.audio-btns').on('click','.btn', function(e) {
    e.preventDefault();
    var audio = $(this).data('audio');
    if (audio.paused) audio.play()
    else audio.pause();
  });
});
</script>

Open in new window

1
 
Brian LinDesignerAuthor Commented:
Thank you so much, Julian Hansen. I have learned so much from your code and this is exactly what I need :)
0
 
Brian LinDesignerAuthor Commented:
Thank you all for the awesome code
0
 
Julian HansenCommented:
You are most welcome.
0
 
Brian LinDesignerAuthor Commented:
Hi, Julian Hansen

Actually, i was trying to re position each player like this

Artboard-1.png
So, some of player image is wider and bigger....

Cheers
0
 
HainKurtSr. System AnalystCommented:
check this

<table id=tblPlayers>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td colspan=3></td><td rowspan=2 colspan=2></td></tr>
<tr><td colspan=3></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

Open in new window


#tblPlayers tr td {
  width: 75px;
  height: 75px;
  background-color: black;
}

#tblPlayers {
  border-spacing: 10px;
  border-collapse: separate;
}

Open in new window


https://jsfiddle.net/xLdny47m/
1
 
Brian LinDesignerAuthor Commented:
Thanks, HK. It looks great... however, I am trying to do the following using Julian's code
2017-10-13_13-42-59.pngCheers
0
 
HainKurtSr. System AnalystCommented:
put your buttons inside tds, and set style of your buttons as "width:100%; height:100%"

https://jsfiddle.net/j6Lbu9xo/

<table id=tblPlayers>
  <tr>
    <td><button /></td>
    <td><button /></td>
    <td><button /></td>
    <td><button /></td>
    <td><button /></td>
  </tr>
  <tr>
    <td colspan=3><button /></td>
    <td rowspan=2 colspan=2><button /></td>
  </tr>
  <tr>
    <td colspan=3><button /></td>
  </tr>
  <tr>
    <td><button /></td>
    <td><button /></td>
    <td><button /></td>
    <td><button /></td>
    <td><button /></td>
  </tr>
</table>

Open in new window


#tblPlayers tr td {
  width: 75px;
  height: 75px;
  background-color: black;
}

#tblPlayers {
  border-spacing: 10px;
  border-collapse: separate;
}

#tblPlayers button{
  width:100%;
  height:100%;
}

Open in new window


the rest should be same...
0
 
HainKurtSr. System AnalystCommented:
maybe you need to add buttons to separate tds like

bank.append(btn);
>>>
$("#tblPlayers td").eq(i).append(btn);

Open in new window


here what I mean

https://jsfiddle.net/fmtbxep3/
1
 
Brian LinDesignerAuthor Commented:
Thanks HK, i was sweating by just look at all the code lol ... You are awesome. Thanks a lot
1
 
HainKurtSr. System AnalystCommented:
added the images

https://jsfiddle.net/hnfa6xn9/ 

from Julian`s library :)
1
 
Brian LinDesignerAuthor Commented:
cool that is exactly what i was looking for  :) thanks a lot .. again
0
 
Brian LinDesignerAuthor Commented:
Got another question.... how to center image these 3 spots  ? I try the padding in td but the whole clickable area also shift too.  Thanks

2017-10-13_15-01-50.png
2017-10-13_15-01-50.png
0
 
HainKurtSr. System AnalystCommented:
try

https://jsfiddle.net/zdyLpaa7/

.btn.audio {
...
  background-position-x: center;
}

Open in new window


+ hover events as

    var btn = $('<button>', {
        class: 'btn audio ' + e.class
      })
      .html('&nbsp')
      .css({
        backgroundPosition: 'center -' + (e.background * 75) + 'px'
      })
      .on('mouseover', function() {
        $(this).css({
          backgroundPosition: 'center -' + (e.hover * 75) + 'px'
        });
      })
      .on('mouseout', function() {
        $(this).css({
          backgroundPosition: 'center -' + (e.background * 75) + 'px'
        });
      })
...

Open in new window

0
 
HainKurtSr. System AnalystCommented:
but I suggest adding different images for each button like

image_X_on.png
image_X_off.png

where X = 0,1,2...

and adjust your code accordingly...
in this sample, one image actually contains multiple images and we just slide it up and down!!!
0
 
Brian LinDesignerAuthor Commented:
Awesome. Thanks HainKurt
0
 
Brian LinDesignerAuthor Commented:
Yeah, I was thinking about that too.... so using different image in each Td... I can add the image but I had trouble adding hover tho :) and it was kind out of my knowledge again
0
 
HainKurtSr. System AnalystCommented:
you just to use

var btn = $('<button>', {
        class: 'btn audio ' + e.class
      })
      .html('&nbsp')
      .css({
        backgroundImage: 'url(/images/btn_'+i+'_on.png)'
      })
      .on('mouseover', function() {
        $(this).css({
        backgroundImage: 'url(/images/btn_'+i+'_hover.png)'
        });
      })
      .on('mouseout', function() {
        $(this).css({
        backgroundImage: 'url(/images/btn_'+i+'_on.png)'
        });
      })

Open in new window


and prepare

btn_X_on.png
btn_X_hover.png

for each X=0,1,2...
0
 
Brian LinDesignerAuthor Commented:
Works like charm.... do you know why there are black gaps on top and bottom of image ? Cheers

2017-10-13_16-52-30.png
0
 
Brian LinDesignerAuthor Commented:
And is it possible to create it in bootstrap ? so these windows are responsive :) Cheers
0
 
HainKurtSr. System AnalystCommented:
your image may not be 1:1 ratio or there may be some padding/margin somewhere ...

need to see the code or you should create a demo similar to what I did...

for responsive thing... you may use something like this:

#tblPlayers tr td {
  height: 75px;
  background-color: black;
}

#tblPlayers {
  border-spacing: 10px;
  border-collapse: separate;
  max-width: 960px;
  min-width: 400px;
  width:100%;
}

Open in new window


https://jsfiddle.net/tadm9jo5/

semi responsive :)
0
 
Brian LinDesignerAuthor Commented:
Thank you very much, it works nicely after some try on the numbers. I just wish the table can shift sort like how Bootstrap format does :)
0
 
HainKurtSr. System AnalystCommented:
Bootstrap shifts images down if it does not fit...
and you dont need this I guess...
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

  • 15
  • 12
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now