I don't know how to get it back to the play button after you hit pause. I'm stuck on that

HTML & CSS
1

I’m trying to get this code to work, but I can’t figure out how to.

I know of this code, but I don’t know how to get it working.
[this.paused?this.play():this.pause();]

This is just one Button

<div style="display:block; cursor: pointer; width: 50px; height:50px; background-color:#000000;">
<button style="border:; cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:#00ffff;color:blue;padding: 13px 6px"
onclick="document.getElementById('player').play()">Play</button>
</div>

<audio id="player" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>

This is two buttons. Play / Pause

<div style="width:0px;" onclick="myObject=document.getElementById('myObj5h'); 
myObject.style.display='block'; this.style.display='none'">

<div style="display:block; cursor: pointer; width: 50px; height:50px; background-color:#000000;">

<button style="border:; cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:#00ffff;color:blue;padding: 13px 6px"
onclick="document.getElementById('player').play()">Play</button>

</div></div>

<div id="myObj5h" style="display: none;">

<div style="display:block; background-color:black;width: 50px; height:50px;">

<button style=" cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:orange;color:blue;padding: 13px 0px;"
onclick="document.getElementById('player').pause()">Pause</button>

</div></div>

<audio id="player" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>
2

Get rid of the inline CSS and inline JS.

Then, like this:

<button id="button">Play</button>

<audio id="player">
  <source src='http://hi5.1980s.fm/' type='audio/mpeg'/>
</audio>

and

var button = document.getElementById("button");
var audio = document.getElementById("player");

button.addEventListener("click", function(){
  if(audio.paused){
    audio.play();
    button.innerHTML = "Pause";
  } else {
    audio.pause();
    button.innerHTML = "Play";
  }
});

Demo

3 Likes
3

How would I do that through inline CSS and inline JS?

Is it possible?

4

No - with proper security in place all inline CSS and JavaScript gets ignored.

5

Why would want to use such ugly incomprehensible code?

1 Like
6

lol, whaaat?

7

Appropriate CSP headers only allow external CSS and JavaScript to load from ‘self’ (the current domain) and any domains specifiically listed in the header. All inline code gets ignored unless you also add ‘unsafe-inline’ to the header (acknowledging that inline code is unsafe). This is a security measure that any web site can implement to block cross site CSS and scripting once they have their site written properly to keep the HTML, CSS and JavaScript in separate files.

There are also extensions available for Firefox, Chrome, Opera and Vivaldi that allow the browser owner to apply the same security measures in their browser so as to provide themselves additional security protection. There may be extensions also available for other browsers but I haven’t checked.

See https://en.wikipedia.org/wiki/Content_Security_Policy for further info.

3 Likes
8

Funny - where I come from, the normal response would be “Thank you, @James_Hibbard” …

But please stop asking this. You know perfectly well by now what the response will be.

When you ask a question here, we aim to ensure that answers will reflect best practice, as Pullo’s has done. For some reason, though, you have a fixation with the kind of code which went out with the Ark. While there is nothing to stop you taking Pullo’s good, clean, functioning code and messing it up to your heart’s content, you should not expect other members here to go down the same road.

So, as I said, feel free to convert it yourself, but please stop asking to be spoon-fed bad code.

5 Likes
9

Hi there asasass,

check out the attachment to see play and pause audios.

Of course, I don’t expect you to use though. :flushed:

radios.zip (1.5 KB)

coothead

2 Likes
10

I already know how to do this.

I want to have one button control both play and pause, so there’s only 1 button. That’s what I’m trying to accomplish. https://jsfiddle.net/c8a7n40s/2/

<audio id="player" src="http://hi5.1980s.fm/;"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pause</button>
    <button onclick="document.getElementById('player').pause() ;document.getElementById('player').currentTime=0;">Stop</button>
    <button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button>
</div>
11

So wehy are you asking.

Anyway once you implement appropriate security on your site all the inline CSS and JavaScript will stop working as proper security doesn’t allow that as it is a security risk as others can insert their own CSS and JavaScript into your page to install viruses onto your visitors computers and then you’ll get the blame.

12

I want to have one button control both play and pause, so there’s only 1 button.

13

So delete the other buttons from the HTML and write your external JavaScript so that it performs the appropriate action based on the current state.

2 Likes
14

Done!

<button id="playButton" style="cursor: pointer; font-family:Tahoma; font-weight: bold;font-size:14px; background-color:green;color:blue;padding:13px 6px " onclick="  
var button = document.getElementById('playButton');
  var player = document.getElementById('player');
  if (player.paused) {
    playButton.innerHTML = 'Pause';
    playButton.style.backgroundColor = 'red';
    playButton.style.padding = '13px 0px';
    player.play();
  } else {
    playButton.innerHTML = 'Play';
    playButton.style.backgroundColor = 'green';
     playButton.style.padding = '13px 6px';
    player.pause();
  }">
  Play</button>
15

I know I’m going to regret asking this, but could you tell me what benefit writing everything inline brings you?

3 Likes
16

We’ve asked asasass that same question about 100 times now and the only answer we got was : “because I like it”.

3 Likes
17

Hi there asasass,

have you considered what happens for those visitors
who happen to have javascript disabled? :mask:

This attachment has one button control for javascript
users and normal control for non-javascript users. :sunglasses:

It goes without saying, that the mark-up and the CSS
are very easy to maintain. :ok_hand:

Of course, I don’t expect you to use it though, but I am
posting it as it may be of mild interest to some members. :flushed:

one-button-audio.zip (1.9 KB)

coothead

7 Likes
18

Very neat, @coothead - and keyboard accessible, too.

2 Likes
19

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.