Firstly I'm trying not to use the default html5 standard controls and I'd be happy to use jQuery if possible but I've taken it out for now as I was unsure of what the problem is.
At the moment I'm simply trying to have a play button which plays some music once clicked, which will change to a pause button. This pause button will then obviously pause the music once clicked.
I will leave some annotation in so you can see some of the things I have tried. Currently the play button appears but nothing happens when it is clicked.
Any help would be greatly appreciated.
HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/audio-controls.js"></script>
<link rel="stylesheet" href="css/menu.css">
</head>
<div id="content-container">
<audio id="music">
<source src="media/mexico-music.mp3" type="audio/mpeg"/>
</audio>
<button id="play-music-button" class="play"></button>
</div>
CSS:
#play-music-button {
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-position: center;
}
.play {
background: url("../assets/play.png") no-repeat;
}
.pause {
background: url("../assets/pause.png") no-repeat;
}
JS:
$(document).ready(function() {
var music = document.getElementById("music");
var play_music_button = document.getElementById("play-music-button");
function playAudio() {
if (music.paused) {
music.play();
play_music_button.innerHTML = "Pause";
/*play-music-button.className = "";
play-music-button.className = "pause";*/
} else {
music.pause();
play_music_button.innerHTML = "Resume";
/*play-music-button.className = "";
play-music-button.className = "play";*/
}
music.addEventListener('ended',function() {
play_music_button.innerHTML = "Play";
});
}
play-music-button.addEventListener("click", playAudio);
});
You're calling play_music_button as play-music-button, and you've defined that twice when you only need it inside of your defined function. And you need to add an ended event listener to set the button back to "Play"
$(document).ready(function() {
var music = document.getElementById("music");
var play_music_button = document.getElementById("play-music-button");
function playAudio() {
if (music.paused) {
music.play();
play_music_button.className = 'pause';
} else {
music.pause();
play_music_button.className = 'play';
}
music.addEventListener('ended',function() {
play_music_button.className = 'play';
});
}
play_music_button.addEventListener("click", playAudio);
});
#play-music-button {
height: 60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-position: center;
}
.play {
background: url("https://image.flaticon.com/icons/png/512/0/375.png") no-repeat;
}
.pause {
background: url("http://downloadicons.net/sites/default/files/pause-icon-14021.png") no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-container">
<audio id="music">
<source src="http://skwaat.com/clips/iloveyou.mp3" type="audio/mpeg">
</audio>
<button id="play-music-button" class="play"></button>
</div>
Related
I've been trying to do the following on my website's main page : a video in fullscreen plays (no controls, no loop, muted, autoplays, stored locally) and when it ends, the video is hidden and a div element shows.
I'm used to working with HTML and CSS but not so much JavaScript, so what I've done thus far is put the video, and used a checkbox to hide/show the elements (as shown here) and then tried to modify it so it would detect when the video ends, but I can't make it work.
The code I'm using is probably wrong, as it was meant for a checkbox, but I've also tried the solutions written there and it seems like the issue comes from the function used to detect when the video ends not working.
Here is what I've tried to automatize it :
#menudisplay {
display: none;
text-align: center;
margin-top: 20vh;
font-family: 'Montserrat';
}
#menudisplay ul {
list-style-type: none;
}
#menudisplay ul li {
padding: 110px;
}
.style {
width: 100vw;
height: 100vh;
object-fit: contain;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-color:lightgray;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="charset=UTF-8" />
<link rel="stylesheet" href="./mystyle.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
</head>
<video autoplay muted class="style">
<source src="./video.mp4" type="video/mp4">
The video is not working.
</video>
<div id="menudisplay">
<img class="style" src="./img.jpg">
<ul>
<li>
EXEMPLE 1
</li>
<li>
EXEMPLE 2
</li>
</ul>
</div>
<script>
function myFunction() {
var video = document.getElementById("video");
var menudisplay = document.getElementById("menudisplay");
if (video.ended == true) {
menudisplay.style.display = "block";
video.style.display = "none";
} else {
menudisplay.style.display = "none";
}
}
</script>
</html>
I use Visual Studio Code and my web browser is Edge.
Thank you in advance, I'm really stuck !
In this example I added both an evenlistener for DOMContentLoaded (for making sure that the document has been loaded) and for the video ending.
document.addEventListener('DOMContentLoaded', e => {
var video = document.getElementById("video");
var menudisplay = document.getElementById("menudisplay");
video.addEventListener('ended', e => {
menudisplay.style.display = "block";
video.style.display = "none";
});
});
#menudisplay {
display: none;
text-align: center;
margin-top: 20vh;
font-family: 'Montserrat';
}
#menudisplay ul {
list-style-type: none;
}
#menudisplay ul li {
padding: 110px;
}
.style {
width: 100vw;
height: 100vh;
object-fit: contain;
position: fixed;
top: 0;
left: 0;
z-index: -1;
background-color: lightgray;
}
<!DOCTYPE html>
<html>
<head>
<title>Website</title>
<meta http-equiv="Content-Type" content="charset=UTF-8" />
<link rel="stylesheet" href="./mystyle.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Amatic SC|Montserrat' rel='stylesheet'>
</head>
<body>
<video autoplay muted class="style" id="video">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
<p>The video is not working.</p>
</video>
<div id="menudisplay">
<img class="style" src="./img.jpg">
<ul>
<li>
EXEMPLE 1
</li>
<li>
EXEMPLE 2
</li>
</ul>
</div>
</body>
</html>
this should work,
const video = document.querySelector('video');
const menuDisplay = document.querySelector('#menudisplay');
video.addEventListener('ended', (event) => {
menuDisplay.style.display = 'block';
//you can also do things with 'event' obj
});
https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event
you can use this script to detect when the video finished and what should be displayed after that:
video not supported
<script type='text/javascript'>
document.getElementById('myVideo').addEventListener('ended',myHandler,false);
function myHandler(e) {
// What you want to do after the event
}
</script>
like the others.
var video = document.getElementById("video");
var videoPl = document.getElementById("menudisplay");
video.addEventListener('ended', function(e) {
videoPl.style.display = 'block'
})
https://www.w3schools.com/jsref/event_onended.asp
I'm trying to play audio when the div .deley change to display: block, but something does not work. The online audio clips are correct, it's not the problem. My problem is in my script, but I can not find it. Maybe .pause is not a function?
What could be wrong?
function see() {
var x = document.getElementById("deley");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
// === Scrip for audio play ====
$(document).ready(function(){
$(".deley").hide();
// if sound is currently playing, stop it and reset
if(!$("#notify").paused) {
$("#notify").pause();
$("#notify").currentTime = 0;
}
setTimeout(function () {
$(".deley").show();
$("#notify").play();
}, 0);
});
#cont {
width:200px;
margin:0 auto
}
.deley {
display:none;
width:96px;
height:40px;
background:red;
margin:20px 0;
text-align:center;
line-height:40px;
font-family:Arial, sans-serif;
color:#fff
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont">
<div class="deley" id="deley">Deley</div>
<audio id="notify">
<source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.ogg" type="audio/ogg">
<source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3" type="audio/mpeg">
</audio>
<button onclick="see()">Open / Close</button>
</cont>
jQuery Objects✱ and JavaScript Objects🞳 are different. They do not recognize one another which is why the following statements do not work:
if (!$(".notify").paused) {
$(".notify").pause();
$(".notify").currentTime = 0;
...
$(".notify").play();
The MediaElement API is Plain JavaScript only. Any methods/properties/events from said API is not recognized by jQuery -- Plain JavaScript Objects are needed to use methods .pause() and .play(), and properties .paused and .currentTime.
Solutions
Reference a Plain JavaScript Object🞳
document.querySelector(selector)
Dereference a jQuery Object✱
$(selector)[0]
OR
$(selector).get(0)
There are a couple of other important things to remember about jQuery:
Never use onevent attributes: <buttononclick='func();'</button>
Assign .class attributes to elements avoid #id attributes.
The versatility jQuery affords to us makes such antiquated practices unnecessary and wasteful. Also, the function see() is no longer needed -- functionality of see() is now integrated into function audioSwitch().
$('button').on('click', audioSwitch);
function audioSwitch(e) {
if (!$(".notify")[0].paused || $('.delay').is(':visible')) {
$(".notify")[0].pause();
$(".notify")[0].currentTime = 0;
$(".delay").hide();
} else {
setTimeout(function() {
$(".notify")[0].play();
$(".delay").show();
}, 750);
}
}
.cont {
width: 200px;
margin: 0 auto
}
.delay {
display: none;
width: 96px;
height: 40px;
line-height: 40px;
background: red;
color: #fff;
margin: 20px 0;
text-align: center;
font-family: Arial, sans-serif;
}
<section class="cont">
<figure class="delay">
<figcaption>Delay</figcaption>
</figure>
<audio class="notify" src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3">
</audio>
<button>Open / Close</button>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Here is a working example.
function see() {
var x = document.getElementById("deley");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
};
// === Scrip for audio play ====
$(document).ready(function(){
$(".deley").hide();
// if sound is currently playing, stop it and reset
if(!$("#notify")[0].paused) {
$("#notify")[0].pause();
$("#notify")[0].currentTime = 0;
}
setTimeout(function () {
$(".deley").show();
$("#notify")[0].play();
}, 0);
});
#cont {
width:200px;
margin:0 auto
}
.deley {
display:none;
width:96px;
height:40px;
background:red;
margin:20px 0;
text-align:center;
line-height:40px;
font-family:Arial, sans-serif;
color:#fff
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont">
<div class="deley" id="deley">Deley</div>
<audio id="notify">
<source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.ogg" type="audio/ogg">
<source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3" type="audio/mpeg">
</audio>
<button onclick="see()">Open / Close</button>
</cont>
Jq object dose not have play, pause events. you will have to change it to a simple javascript to access those events.
emphasized text
Have a look below and i also simplified the function fot you
function see() {
$(".deley").toggle("fast", function(){
var player= $("#notify")[0];
// is the player hidden then pause and reset
if($(this).is("hidden")) {
player.pause();
player.currentTime = 0;
}else
player.play();
});
};
#cont {
width:200px;
margin:0 auto
}
.deley {
display:none;
width:96px;
height:40px;
background:red;
margin:20px 0;
text-align:center;
line-height:40px;
font-family:Arial, sans-serif;
color:#fff
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont">
<div class="deley" id="deley">Deley</div>
<audio id="notify">
<source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.ogg" type="audio/ogg">
<source src="https://notificationsounds.com/soundfiles/8b16ebc056e613024c057be590b542eb/file-sounds-1113-unconvinced.mp3" type="audio/mpeg">
</audio>
<button onclick="see()">Open / Close</button>
</cont>
$(document).ready(function(){
$(".deley").hide();
// if sound is currently playing, stop it and reset
if(!$("#notify")[0].paused) {
$("#notify")[0].pause();
$("#notify")[0].currentTime = 0;
}
setTimeout(function () {
$(".deley").show();
$("#notify")[0].play();
}, 0);
});
https://stackoverflow.com/a/16093819/11343720
Or
document.getElementById('notify').play();
I'm coding one audio player which play/pause on button but its also autoplaying. So first button that appears is Pause button and when its clicked it pauses the audio and changes to Play button. Now I tried to add text under it that says Playing or Paused. I managed to do that but its only happening when the button is clicked. So when I refresh the website there is no text under playing audio, then I have to click it and it will appear first Paused and then after one more hit Playing.
So I want Playing to be under Pause Button without needing to click it.
function changeImage() {
var image = document.getElementById('player');
if (image.src.match("pause")) {
image.src = "assets/img/icons/play.png";
document.getElementById("fetch").innerHTML = "Paused";
} else {
image.src = "assets/img/icons/pause.png";
document.getElementById("fetch").innerHTML = "Playing";
}
}
var playing = true;
function action() {
var audio = document.getElementById("audio");
if (playing === false) {
audio.play();
playing = true;
document.getElementById("append").innerHTML = "Playing";
} else {
audio.pause();
playing = false;
}
}
#audioplayer {
position: relative;
left: 65px;
bottom: 11px;
float: right;
z-index: 100;
cursor: pointer;
height: 81px;
width: 81px;
border-radius: 50%;
background-color: #0FB6D1;
}
#audioplayer:hover {
-moz-box-shadow: 0 0 20px #6854e7;
-webkit-box-shadow: 0 0 20px #6854e7;
box-shadow: 0px 0px 20px #6854e7;
}
#fetch {
font-family: 'gothic';
text-align: center;
font-weight: 500;
margin-left: 1.9px;
}
<div id="audioplayer">
<img id="player" onclick="action();changeImage();" src="assets/img/icons/pause.png" />
<audio id="audio" src="assets/music/music.wav" loop autoloop autoplay></audio>
<p id="fetch"></p>
<p id="append"></p>
</div>
I am not sure why you have "fetch" & "append" divs so I have removed one for this example.
document.getElementById('player').addEventListener('click', function() {
action();
});
var playing = true;
var image = document.getElementById('player');
function action() {
var audio = document.getElementById("audio");
if (playing === false) {
audio.play();
playing = true;
document.getElementById("fetch").innerHTML = "Playing";
image.src = "assets/img/icons/pause.png";
} else {
audio.pause();
playing = false;
document.getElementById("fetch").innerHTML = "Paused";
image.src = "assets/img/icons/play.png";
}
}
HTML:
<div id="audioplayer">
<img id="player" src="assets/img/icons/pause.png" />
<audio id="audio" src="assets/music/music.wav" loop autoloop autoplay></audio>
<p id="fetch">Playing</p>
</div>
I need help with loading a URL one time into a HTML5 audio player and then be able to click on an elements to do additional controls.
This is the code so far:
<div class="primary">
<article id="145">
<div class="loaddata" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3" onclick="setTimeout(function() { document.getElementById('145').classList.add('dataloaded'); }, 1)"> Load "Song1" </div>
</article>
<article id="139">
<div class="loaddata" data-rel="http://feeds.soundcloud.com/stream/327164631-scott-johnson-27-tms-1281.mp3" onclick="setTimeout(function() { document.getElementById('139').classList.add('dataloaded'); }, 1)"> Load "Song2" </div>
</article>
<article id="133" class="dataloaded">
<div class="loaddata" data-rel="http://archive.org/download/DTH20170611/DTH20170611.mp3" onclick="setTimeout(function() { document.getElementById('133').classList.add('dataloaded'); }, 1)"> Load "Song3" </div>
</article>
The player:
<div class="audio-player-wrapper">
<div class="mejs__button mejs__group-left">
<div class="rewind-btn">
<button title="Rewind 15 seconds">15</button>
</div>
<div class="playpause-btn">
<button title="Play" class="play" id="ppbtn"></button>
</div>
<div class="forward-btn">
<button title="Forward 15 seconds">15</button>
</div>
</div>
<div class="current-time">00:00</div>
<div class="duration-time">00:00</div>
<div class="mejs__button mobile-mute">
<button class="mobile-mute-btn mobile-mute-off"></button>
</div>
<audio width="100%" height="75px" id="audio-player" controls="controls">
<source id="sourceMp3" src="#" type="audio/mp3">
</audio>
</div>
JS:
$(".loaddata").on("click", function() {
var mp3Url = $(this).data('rel');
$("#audio-player_html5").attr('src', mp3Url);
});
$(".loaddata").click(function(){
$('.dataloaded').removeClass();
$('#ppbtn').click();
});
What the code above does is when a user clicks on loaddata the JS loads the url in data-rel into the src in sourceMP3. Then it scans 'primary' for any class called dataloaded and removes it. One millisecond later, it adds dataloaded to the article ID. Then the player starts playing the loaded URL in jquery $('#ppbtn').click();.
What I'm trying to find is a way to load the URL on the first click then be able to control the play/pause button after the first click. I tried doing .one() on loading the URL once but when all three elements have been clicked once, it won't load the URL in the clicked element and all three elements div.loaddata can control the player.
I guess the easy way of explaining it: remove existing .dataloaded, add URL to player, add .dataloaded to the article that was clicked then be able to click on play/pause button only on the div.loaddata with 'dataloaded'.
New question: is there a way to change a function when you click on an element? Like a new onclick?
I saw this answer this morning (but had a busy day!) .. I created a jsfiddle for playing multiple sounds some time ago but when I re-read the question this evening, it seemed not quite enough to cover what you were trying to do.
I found that there is a library called MediaElement.js available; the source code is outlined extensively in this article and there is a demo also
Alternately there is very good (slightly lengthy!) article about designing a custom audio player by Rose (second name not given) on her website where there is also a demo
Best of all though, a fellow SO-er gives a wonderful answer to a similar question (about a year ago) and there is a jsfiddle provided in that answer (top pick i think..)
the code (hope there's room!):
var audio_player = $("#audio-player");
var play_button = $('#play');
var progress_bar = $("#progressbar");
var time = $("#time");
var mute_button = $('#mute');
var volume_bar = $('#volume');
var more_info = $('#more-info-box');
var info_tray = $("#info-tray");
var player = document.getElementById('player');
var duration = 0;
var volume = 0.75;
player.onloadedmetadata = function() {
duration = player.duration;
progress_bar.progressbar("option", { 'max' : duration });
};
player.load();
player.volume = 0.75;
player.addEventListener("timeupdate", function() {
progress_bar.progressbar('value', player.currentTime);
time.text(getTime(player.currentTime));
}, false);
function getTime(t) {
var m=~~(t/60), s=~~(t % 60);
return (m<10?"0"+m:m)+':'+(s<10?"0"+s:s);
}
function getProgressBarClickInfo(progress_bar, e) {
var offset = progress_bar.position();
var x = e.pageX - offset.left; // or e.offsetX (less support, though)
var y = e.pageY - offset.top; // or e.offsetY
var max = progress_bar.progressbar("option", "max");
var value = x * max / progress_bar.width();
return { x: x, y: y, max: max, value: value };
}
volume_bar.progressbar({
value : player.volume*100,
});
volume_bar.click(function(e) {
var info = getProgressBarClickInfo($(this), e);
volume_bar.progressbar('value', info.value);
player.volume = info.value / info.max;
});
progress_bar.progressbar({
value : player.currentTime,
});
progress_bar.click(function(e) {
var info = getProgressBarClickInfo($(this), e);
player.currentTime = player.duration / info.max * info.value;
});
play_button.click(function() {
player[player.paused ? 'play' : 'pause']();
$(this).toggleClass("fa-play", !player.paused);
$(this).toggleClass("fa-pause", player.paused);
});
mute_button.click(function() {
if (player.volume == 0) {
player.volume = volume;
} else {
volume = player.volume;
player.volume = 0;
}
volume_bar.progressbar('value', player.volume * 100);
$(this).toggleClass("fa-volume-up", player.volume != 0);
$(this).toggleClass("fa-volume-off", player.volume == 0);
});
more_info.click(function() {
audio_player.animate({
height: (audio_player.height() == 50) ? 100 : 50
}, 1000);
});
#audio-player {
height: 50px;
width: 500px;
overflow: hidden;
background-color: #2B2B2B;
color: white;
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
#controls {
height: 50px;
background-color: #808080;
width: 350px;
}
.time {
font-size: 10px;
color: white;
position: relative;
top: 14px;
margin: 5px;
}
.ui-progressbar {
background: #2B2B2B;
}
.ui-progressbar-value {
background: white;
}
#progressbar, #volume {
height: 10px;
display: inline-block;
border-radius: 0px;
border: none;
position: relative;
top: 16px;
}
#progressbar {
width: 150px;
}
#play, #mute {
font-size: 16px;
width: 20px;
position: relative;
top: 17px;
}
#play {
margin-left: 15px;
}
#volume {
width: 50px;
}
#more-info-box {
display: inline-block;
width: 150px;
height: 50px;
position: relative;
left: 350px;
top: -50px;
padding-top: 18px;
text-align: center;
font-family: sans-serif;
font-size: 12px;
color: white;
}
#more-info-box, #more-info-box > span {
cursor: context-menu;
}
#info-tray {
display: inline-block;
color: white;
position: relative;
width: 100%;
top: -65px;
height: 50px;
padding: 5px;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<audio id="player">
<source src="http://www.noiseaddicts.com/samples_1w72b820/2543.mp3" type="audio/mpeg" />
</audio>
<div id="audio-player">
<div id="controls">
<i id="play" class="fa fa-pause"></i>
<span id="start-time" class="time">00:00</span>
<div id="progressbar"></div>
<span id="time" class="time">00:00</span>
<i id="mute" class="fa fa-volume-up"></i>
<div id="volume"></div>
</div>
<div id="more-info-box">
<span id="more-info">MORE INFO</span>
</div>
<div id="info-tray">
Track: <span id="track">Semper Fidelis March</span>
</div>
</div>
Hope one of these solutions helps!
I was able to find a working solution. It's not pretty but it works.
First I had two elements, one that loads the data and other controls the player.
<article id="145">
<div class="loaddata" data-rel="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3" onclick="setTimeout(function() { document.getElementById('145').classList.add('dataloaded');document.getElementById('145').classList.add('dataloaded'); }, 1);"> Load "Song1" </div>
<div class="front-playpause">song loaded</div>
</article>
JS:
$(".loaddata").on("click", function() {
var mp3Url = $(this).data('rel');
$("#audio-player_html5").attr('src', mp3Url);
$('.dataloaded').removeClass();
$('#ppbtn').click();
});
$(".front-playpause").click(function(){
$('#ppbtn').click();
});
CSS:
.front-playpause {display:none}
.dataloaded .front-playpause {display:block}
.dataloaded .loaddata {display:none}
When loaddata is clicked, it adds the class 'dataloadedto the article ID and then the CSS hidesloaddataand then displaysfront-playpause` and that's how I found a work around.
Thanks everyone for the help.
I'm having trouble playing a SoundCloud stream with a custom button.
Here's a CodePen I'm working on: https://codepen.io/tremolocreative/pen/Zepjwm
HTML
<script src="https://connect.soundcloud.com/sdk.js"></script>
<audio id="soundcloudPlayer"></audio>
<button></button>
CSS
button {
background: url(//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646);
background-size: cover;
background-position: top left;
background-repeat: no-repeat;
width: 20px;
height: 20px;
border: 0;
outline: 0;
display: block;
}
button.pause-sprite {
background-position: top right;
}
JS
var client_id = '278594df9a311b2a1a56251b3a2b0fbe';
var track_id = '293605256';
SC.initialize({
client_id: client_id
});
SC.get('/tracks/' + track_id, {}, function(sound) {
$('#soundcloudPlayer').attr('src', sound.stream_url + '?client_id=' + client_id);
$('button').on('click', function() {
$(this).toggleClass('pause-sprite');
$('#soundcloudPlayer').play(); // Play track
});
});
Thanks!
Here's my working snippet, although it's not complete (I was having dinner, was gonna finish it before I saw your comment) Basically all that remains is to add an if-else statement to see if the audio is playing, and if it's playing then pause it. Add the pause class on pause (but remove it on play if it's there).
At the moment, in the fiddle the icon toggles to pause but the playing doesn't pause.. in the snippet i put an alternative version that doesn't toggle but there's a closer else-if (i didn't look at the API yet)
var client_id = '278594df9a311b2a1a56251b3a2b0fbe';
var track_id = '293605256';
SC.initialize({
client_id: client_id
});
$(document).ready(function() {
$("#stream").on("click", function() {
SC.stream("/tracks/" + track_id, function(sound) {
if (sound.currentTime > 0) {
$('button').addClass('pause-sprite');
sound.pause();
} else {
$('button').removeClass('pause-sprite');
sound.play();
}
});
});
});
button {
background: url(//cdn.shopify.com/s/files/1/1055/5530/t/8/assets/play-pause-sprite.svg?2157621096199230646);
background-size: cover;
background-position: top left;
background-repeat: no-repeat;
width: 20px;
height: 20px;
border: 0;
outline: 0;
display: block;
}
button.pause-sprite {
background-position: top right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//connect.soundcloud.com/sdk-2.0.0.js"></script>
<div id='player'>
<button href="#" id="stream">
</button>
</div>