The following code plays and stops an audio file, but only once. (1 x play, 1 x pause). Is there a way to play/pause regularly?
function audioHandler(){
var audio = document.getElementById("myaudio");
if(status == false){
audio.style.display="block";
audio.play();
status = true;
}
else {
audio.style.display="none";
audio.pause();
status = false;
}
}
It´s not that important, but i also want to change the play to a pause icon and backwards...
<img src="play.png">
The problem is the global variable status, since you are using it as a global variable(the window object has a property called status), the value assigned to it will be converted to string.
So when you apply status = false, the real value assigned will be status = 'false'; which will always be truthy, ie 'false' == false will be false so your if block will never get executed again!!!
So just rename the variable status to something else then it should work
var aStatus = false;
function audioHandler() {
var audio = document.getElementById("myaudio");
var audioimg = document.getElementById("myaudioimg");
if (aStatus == false) {
audio.style.display = "block";
audio.play();
aStatus = true;
audioimg.src = "pause.png"
} else {
audio.style.display = "none";
audio.pause();
aStatus = false;
audioimg.src = "play.png"
}
}
then
<img id="myaudioimg" src="play.png" />
Related
I have code that dynamically loads audio files from a directory. Right now they play/pause when a div is clicked. Here is my javascript doing that:
function get_list_of_files_from_html( html_string ){
var el = document.createElement( 'html' );
el.innerHTML = html_string;
var list_of_files = el.getElementsByTagName( 'a' );
var return_string ='<UL>';
for(var i=5; i < list_of_files.length ; i++){
var current_string = list_of_files[i];
var new_string =
current_string.toString().replace
(/http:\/\/www.website.com\/~user\/programming\//g,'');
var brand_new = new_string.replace('.mp3','');
return_string += '<div class="floating"
onclick="playAudio(\'audio_tag_id'+i+'\')" >'+brand_new+'<audio
id="audio_tag_id'+i+'"> <source src = "'+current_string+'"
type="audio/mpeg"></audio>';
return_string += '</div>';
}
return return_string;
}
function playAudio(tag_id){
var audio= document.getElementById(tag_id);
return audio.paused ? audio.play() : audio.pause();
}
I want to make a button that plays only like five seconds of each audio file and runs through them in order. Does anyone know how I would go about doing this?
You'll need to work asynchronously, so it's a ping-pong between the main code and a callback. Something like this:
// The click event handler
function onPlayClicked(event){
if (!window.HTMLAudioElement){
console.write("Error: no audio");
return;
}
// toggle the state of the playlist not the actual music player
isPlaying = !isPlaying;
if (isPlaying) startPlaying();
else resetList(); // if clicked while playing
}
// sets timer and plays current
function startPlaying(){
if (isPlaying){ // just checking that no one pressed the STOP in the meantime...
setTimout(done, 5000); // timer callback and miliseconds
playAudio();
}
}
// stops this song and starts next. Callback from timer
function done(){
if (nowPlaying == lastSongIndex(){
pauseAudio();
resetPlaylist();
return;
}
if (isPlaying){
pauseAudio();
nowPlaying++;
startPlaying();
}
// plays current audio
function playAudio(){
// Friendly advice: don't use getElementByTag. There may be other 'a's.
audioList = document.getElementById('audiolist');
audioURL = audioList[nowPlaying]; // nowPlaying advanced by done()
urlregex = '/http:\/\/www.website.com\/~user\/programming\//g';
audioData = audioUrl.remove(urlregex).replace('.mp3','');
player = document.getElementById('audioplayer');
player.src = audioData;
player.play();
}
function pauseAudio(){
player = document.getElementById('audioplayer');
player.pause();
}
function reset(){
pauseAudio();
nowPlaying = 0;
isPlaying = false;
// Unpress the button
}
// you can easily fill in the rest.
For understanding the audio control in HTML5 see this for an overview at w3schools, and this as an example on the same website.
Also note friendly remark: Javascript uses camelCase as a convention and not snake_case as in Python.
this is my first post and I have searched a bit for an answer, but haven't come across any solutions.
Basically all I want to do is make onClick="" both start and stop audio with the javascript function, playSound(sound). Here is what I've ended with so far. Right now, no audio plays when I click, but when I test the single code 'song1.play()' by itself the sound plays, but obviously doesn't stop when clicked again. Hopefully this isn't too difficult.
function playSound(sound){
var song1=document.getElementById(sound);
var isPlaying = true;
if (!isPlaying){
isPlaying == true;
song1.play();
}
else{
isPlaying == false;
song1.pause();
}
}
Two small corrections.
a) var isPlaying = true; should be declared globally to retain its values between multiple calls to "OnClick".
b) The == should be changed to = in assignment statements of `isPlaying' variable.
var isPlaying = true;
function playSound(sound){
var song1=document.getElementById(sound);
if (!isPlaying){
isPlaying = true;
song1.play();
}
else{
isPlaying = false;
song1.pause();
}
}
You were comparing the isPlaying variable with true and false, instead of assigning them to the variable. This should work now.
function playSound(sound){
var song1=document.getElementById(sound);
var isPlaying = true;
if (!isPlaying){
isPlaying = true;
song1.play();
}
else{
isPlaying = false;
song1.pause();
}
}
You should use = instead of ==
= is Assignment operator where as == is comparison operator.
You can check if a sound is paused using the paused property:
function playSound(sound) {
var song1 = document.getElementById(sound);
song1.volume = .25; // setting the volume to 25% because the sound is loud
if (song1.paused) { // if song1 is paused
song1.play();
} else {
song1.pause();
}
}
<audio id="sound">
<source src="https://www.w3schools.com/TagS/horse.mp3" type="audio/mp3">
</audio>
<button onclick="playSound('sound')">Play/Pause</button>
my sound is playing when i click the button but it doesnt pause or stop when i reclick it. The alert showing the else block is working however so i'm thinking its the second sc.stream. see code below:
var i = $('.song').attr('id');
var is_playing = false;
$('.song').click(function(){
if(is_playing == false){
SC.stream('/tracks/'+i).then(function(player){
player.play();
});
is_playing = true;
} else {
SC.stream('/tracks/'+i).then(function(player){
player.pause();
});
alert('This alert works when is_playing is true');
is_playing = false;
}
});
You are currently creating two separate streams (and two separate player objects). You will need to create the player first and make it available outside the callback, for example by storing it in a global var:
var i = $('.song').attr('id');
var is_playing = false;
var player;
SC.stream('/tracks/'+i).then(function(stream){
player = stream;
});
$('.song').click(function(){
if(is_playing == false){
player.play();
is_playing = true;
} else {
player.pause();
alert('This alert works when is_playing is true');
is_playing = false;
}
});
The following script is playing a soundfile when i click on a img (onclick). How do i pause it by clicking on the same img? I´ve tried audio.pause(), but it won´t work.
function play(){
var audio = document.getElementById("myaudio");
audio.style.display="block";
audio.play();
}
<img src="Bilder/play2.png">
You should rename your function to audioHandler() for example which will handle whether to play or pause your audio.
Create a boolean to remember if your audio was playing or was on pause.
//initial status: audio is not playing
var status = false;
var audio = document.getElementById("myaudio");
function audioHandler(){
if(status == false || audio.paused){
audio.play();
status = true;
}else{
audio.pause();
status = false;
}
}
Check the media.paused property of your HTMLMediaElement
function play_pause(media) {
if (media.paused) {
media.play();
else {
media.pause();
}
}
Use this in the handler on the element you want to control the action
var elm = document.getElementById('play_button'),
audio = document.getElementById('myaudio');
elm.addEventListener('click', function (e) {
play_pause(audio);
});
Hi I have a page with multiple small videos which can be played by clicking on the covering image. How can I stop them playing onclick if there is already one playing? My script is as follows
function PlayVideo(aid, vid)
{
var myVideo = document.getElementsByTagName("video");
if (myVideo.paused) {
document.getElementById(vid).style.display = "block";
document.getElementById(vid).play();
document.getElementById(aid).style.display = "none";
document.getElementById(vid).addEventListener('ended', myHandler, false);
function myHandler(e) {
if (!e) {
e = window.event;
}
document.getElementById(vid).style.display = "none";
document.getElementById(vid).load();
document.getElementById(aid).style.display = "block";
}
} else {
alert("this is an alert");
return false;
}
}
Works fine without the if/else statement but any click starts the movie and then several movies are playing at once how do I define the parameters so that IF any video is playing then a new one will not start.
myVideo is a NodeList, you have to check the value of each video.
var allVideos = document.getElementsByTagName("video");
var areAllPaused = true;
for(var i=0; i < allVideos.length; i++) {
if (!allVideos[i].paused) {
areAllPaused = false;
}
}
you could just use a flag to check, ie
var videoIsPlaying = false;
function playVideo () {
if(videoIsPlaying){
//dont play video
}else{
//play video and set to true
videoIsPlaying = true;
}
}
you'd have to set it on pause etc
document.getElementsByTagName() will return an array with all the video elements in it. To check if any of them is playing you need to loop through the array and check whether any video is playing:
var anyPlaying=false;
for(var i=0;i<myVideo.length;i++){
if(!myVideo[i].paused){
anyPlaying=true;
}
}
if(!anyPlaying){
//...
}else{
return false;
}