Audioplayer

strawbs · Feb 11, 2023

hi all i found this code for a play/pause audioplayer
now could someone please tell me where the audio src goes?

Wictorian · Feb 13, 2023

just do it in javascript and play the audio under the active function

strawbs · Feb 15, 2023

Wictorian said:
just do it in javascript and play the audio under the active function

and what function would that be please?

Wictorian · Feb 15, 2023

Code:

icon.click(function() {
     icon.toggleClass('active');
     return false;

this one

strawbs · Feb 15, 2023

Wictorian said:
Code:

icon.click(function() { icon.toggleClass('active'); return false;

this one

yes but what do i put with that code

Wictorian · Feb 16, 2023

strawbs said:
yes but what do i put with that code

in line 1 declare the audio

Code:

let audio = new Audio(url);

and in the function add

Apache config:

audio.play();

strawbs · Feb 16, 2023

Ok 1. Is this CSS or js
let audio = new Audio(url); line 1

2. Same as 1 audio.play()

Wictorian · Feb 16, 2023

they are both js..
do you know anything about javascript? I suggest learning a bit first

strawbs · Feb 16, 2023

Wictorian said:
they are both js..
do you know anything about javascript? I suggest learning a bit first

done this

Wictorian · Feb 17, 2023

Nice but what's your goal? Do you only want to make the animation or do you actually want to play an audio file?

strawbs · Feb 17, 2023

My goal is to have that play a http icecast stream

Wictorian · Feb 17, 2023

I am not sure how you are supposed to do that? Are you?

strawbs · Feb 17, 2023

Not sure only thing I can think of is by putting audio scr which I think I've already put there

Wictorian · Feb 17, 2023

strawbs said:
Not sure only thing I can think of is by putting audio scr which I think I've already put there

ok so declare the audio in the first line and then activate it upon press

strawbs · Feb 17, 2023

Rite explain first code and activate

strawbs · Feb 17, 2023

Wictorian said:
ok so declare the audio in the first line and then activate it upon press

ok i'm getting there so on lines 8 and 9 i'm getting unexpection token ')'

with these two
});
)};

Wictorian · Feb 17, 2023

can you share the full code

strawbs · Feb 17, 2023

Wictorian said:
can you share the full code

HTML

HTML:

<html>
  <body>
</body><title="Audio Player" class="play"></a>
<source src="http://scotspaul.vside-radio.com:7355/stream" type="audio/mpeg">
</audio>
</html>
</body>

CSS

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);

$background:#f9f9f9;
$foreground:#2c3e50;

$foreground-light:#34495e;


$size:50px;
$ratio:1.2;

$transition-time:0.3s;

body {
  background: $background;
  font-family: 'Open Sans', sans-serif;
  text-align:center;
}

.play {
  display:block;
  width: 0;
    height: 0;
    border-top: $size solid transparent;
    border-bottom: $size solid transparent;
    border-left: ($size*$ratio) solid $foreground;
  margin: ($size * 2) auto $size auto;
  position:relative;
  z-index:1;
  transition: all $transition-time;
  -webkit-transition: all $transition-time;
  -moz-transition: all $transition-time;
  left:($size*0.2);
 
  &:before {
    content:'';
    position:absolute;
    top:($size*-1.5);
    left:($size*-2.3);
    bottom:($size*-1.5);
    right:($size*-0.7);
    border-radius:50%;
    border: ($size*0.2) solid $foreground;
    z-index:2;
    transition: all $transition-time;
    -webkit-transition: all $transition-time;
    -moz-transition: all $transition-time;
  }
  &:after {
    content:'';
    opacity:0;
    transition: opacity ($transition-time * 2);
    -webkit-transition: opacity ($transition-time * 2);
    -moz-transition: opacity ($transition-time * 2);
  }
 
  &:hover, &:focus {
    &:before {
       transform: scale(1.1);
       -webkit-transform: scale(1.1);
       -moz-transform: scale(1.1);
    }
  }
 
  &.active {
      border-color:transparent;
    &:after {
      content:'';
      opacity:1;
      width:($size);
      height:($size*1.6);
      background:$foreground;
      position:absolute;
      right: ($size*0.1);
      top: ($size*-0.8);
      border-left:($size*0.4) solid $foreground;
      box-shadow:inset ($size*0.6) 0 0 0 $background;
    }
  }
}

h1 {
   text-transform:uppercase;
  color:$foreground-light;
  letter-spacing:2px;
  font-size:2em;
  margin-bottom:0;
}

.headline {
   display:block;
  color:$foreground;
  font-size:1.5em;
  margin-bottom:1.5em;
}

.social {
  text-decoration:none;
  color:$foreground-light;
  margin: 0.5em 1.5em;
  display:inline-block;
  &:hover, &:focus {
    color:$foreground;
  }
}

Java

JavaScript:

let audio = document.querySelector("audio");
let play_pause = document.querySelector(".play_pause"); {
  var icon = ('.f04b');
  function playAudio() {
  x.play(); {
     icon.toggleClass('active');
     return true;
  };
};

strawbs · Feb 17, 2023

got the var icon off of font awesome

Wictorian · Feb 17, 2023

I think you got an extra paranthesis on line 2 in javascript

Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
Two events one onclick	1	Feb 22, 2022
Code sharing	2	Oct 15, 2024
How to have two html audio players on one page?	0	May 3, 2022
Save mp3s to local storage	1	Feb 8, 2024
Node.js server that streams an infinite silence sound switches to streaming mew audio data receiving an event, and then returns to silence	0	Aug 16, 2024
Need help getting the duration of an audio file	7	Mar 31, 2022
Inputting a waveform player (for dummies)	0	Sep 15, 2023

Audioplayer

strawbs

Wictorian

strawbs

Wictorian

strawbs

Wictorian

strawbs

Wictorian

strawbs

Wictorian

strawbs

Wictorian

strawbs

Wictorian

strawbs

strawbs

Wictorian

strawbs

strawbs

Wictorian

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads