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

Brian LinDesignerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.