?
Solved

Add Array

Posted on 2017-10-12
32
Low Priority
?
29 Views
Last Modified: 2017-10-16
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
Comment
Question by:Brian Lin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 15
  • 12
  • 5
32 Comments
 
LVL 59

Expert Comment

by:Julian Hansen
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
 

Author Comment

by:Brian Lin
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
 
LVL 60

Assisted Solution

by:HainKurt
HainKurt earned 100 total points
not sure, but I created a demo, but of course not working :)

https://jsfiddle.net/rspvw9k2/
1
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 

Author Comment

by:Brian Lin
Thanks, HK... Seems working for me :) Is it possible to have 10 different background as well ? Cheers
0
 
LVL 60

Assisted Solution

by:HainKurt
HainKurt earned 100 total points
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
 
LVL 60

Assisted Solution

by:HainKurt
HainKurt earned 100 total points
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
 
LVL 59

Assisted Solution

by:Julian Hansen
Julian Hansen earned 900 total points
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
 

Author Comment

by:Brian Lin
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
 
LVL 59

Expert Comment

by:Julian Hansen
Working on it
0
 
LVL 59

Accepted Solution

by:
Julian Hansen earned 900 total points
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
 

Author Comment

by:Brian Lin
Thank you so much, Julian Hansen. I have learned so much from your code and this is exactly what I need :)
0
 

Author Closing Comment

by:Brian Lin
Thank you all for the awesome code
0
 
LVL 59

Expert Comment

by:Julian Hansen
You are most welcome.
0
 

Author Comment

by:Brian Lin
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
 
LVL 60

Expert Comment

by:HainKurt
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
 

Author Comment

by:Brian Lin
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
 
LVL 60

Expert Comment

by:HainKurt
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
 
LVL 60

Expert Comment

by:HainKurt
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
 

Author Comment

by:Brian Lin
Thanks HK, i was sweating by just look at all the code lol ... You are awesome. Thanks a lot
1
 
LVL 60

Expert Comment

by:HainKurt
added the images

https://jsfiddle.net/hnfa6xn9/ 

from Julian`s library :)
1
 

Author Comment

by:Brian Lin
cool that is exactly what i was looking for  :) thanks a lot .. again
0
 

Author Comment

by:Brian Lin
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
 
LVL 60

Expert Comment

by:HainKurt
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
 
LVL 60

Expert Comment

by:HainKurt
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
 

Author Comment

by:Brian Lin
Awesome. Thanks HainKurt
0
 

Author Comment

by:Brian Lin
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
 
LVL 60

Expert Comment

by:HainKurt
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
 

Author Comment

by:Brian Lin
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
 

Author Comment

by:Brian Lin
And is it possible to create it in bootstrap ? so these windows are responsive :) Cheers
0
 
LVL 60

Expert Comment

by:HainKurt
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
 

Author Comment

by:Brian Lin
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
 
LVL 60

Expert Comment

by:HainKurt
Bootstrap shifts images down if it does not fit...
and you dont need this I guess...
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Join & Write a Comment

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

649 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question