Why doesn't my JS function work with my button? - javascript

Trying to make my own play button
Audio loads and plays fine with the HTML Audio Tag
Error console says "Fails to load resource https://open.scdn.co/static/embed.2019-03-05_152e14cd.js.map"
song.play(); typed into JS console works fine
Button does not activate function!
HTML
<audio id="song" controls> <source src="song.mp3"></source>
</audio>
<button class="controls" id="play">Play</button>
JavaScript
var play = document.getElementById("song");
song.addEventListener ("click", buttonActions);
function buttonActions(event){
song.play();
}

You're attaching the event handler to the <audio> element, instead of the <button> element.
Instead of:
var play = document.getElementById("song");
song.addEventListener ("click", buttonActions);
function buttonActions(event){
song.play();
}
It should be:
var play = document.getElementById("play");
play.addEventListener ("click", buttonActions);
function buttonActions(event){
var song = document.getElementById("song");
song.play();
}

Related

playing audio when a button is clicked in html django template

i have the following html code snippet:
<audio controls><source src="{{sound.sound.url}}" type="audio/mpeg" id="yourAudioTag">Your browser does not support the audio element.</audio>
<button id="play">Play</button>
<script>
$(document).ready(function() {
var audioElement = document.getElementById('#yourAudioTag');
$('#play').click(function() {
audioElement.play();
});
});
</script>
but it doesn't seem to play the audio when i click on the button PLAY.
how can i do it?
You are never taking the audio file and assigning it to the variable. In your case audioElement.play(); is playing nothing because it is not linked to anything.
My approach is a little bit different than yours. I decided to put the audio file in the JavaScript directly. You can check it bellow:
Pure JavaScript:
function Play_Audio(){
var audioElement = document.createElement("audio");
audioElement.src = "https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg";
document.getElementById("Play_Button").addEventListener("click", function(music){
audioElement.play();
}, false);
}
Play_Audio();
<button id="Play_Button">Play</button>
jQuery:
$(document).ready(function(){
var audioElement = document.createElement("audio");
audioElement.src = "https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg";
$('#Play_Button').click(function(){
audioElement.play();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Play_Button">Play</button>
Taking the sound from an audio tag:
document.getElementById("Play").addEventListener("click", function(music){
var audioElement = document.getElementById("Audio");
audioElement.play();
}, false);
<audio id="Audio" controls>
<source src="https://raw.githubusercontent.com/Metastruct/garrysmod-chatsounds/master/sound/chatsounds/autoadd/snoop_dogg/hold%20up%20wait.ogg" type="audio/ogg">
</audio>
<div id="Play">Play Button</div>
PS: It took me more time to find an appropriate audio than to write the snippet.... I think, I have issues!

change audiosource on click JS

How can I change a AudioFile on a button click?
First Audiofile should start onLoad and when clicked change to second file. Player shoulden't be Visible.
If possible please answer in JavaSript!
Actually it's so simple :)
Just call a javascript function on a onClick event of a button.
//demo.html
<script>
var url = "mymusic.mp3";
function changeURL(){
document.getElementByIde('audio1').src = url;
}
</script>
<audio id="audio1" autoplay src="my.mp3"></audio>
<button onclick="changeURL()">Change Audio</button>
In the example, the function changeURL() will be call when we click on Change Audio Button.
Try this:
var url = "http://hydra-media.cursecdn.com/dota2.gamepedia.com/e/e5/Invo_laugh_07.mp3";
document.getElementsByTagName('button')[0].onclick = function() {
document.getElementsByTagName('audio')[0].src = url;
};
<audio autoplay src="http://hydra-media.cursecdn.com/robocraft.gamepedia.com/c/c6/BattleLoop.mp3"></audio>
<button>button</button>

Playing Audio Using Jquery

I have a small jQuery function to play audio when a user clicks the link. I don't need any controls, they are short samples. I just want to play anytime a user clicks. Here is the html for the section that should play;
</div class="classicalRecordings">
Open song
</div>
Then this is the jQuery to play the sound;
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
audioElement.addEventListener("load", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
It doesn't seem to work. I think it has to do with the src variable, I am not sure I am passing it to the audioElement correctly. I have tested using an alert to be sure I am grabbing the data-audio-src correctly. Any help is appreciated.
I think that the event you're looking for is the loadeddata event.
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
// changed "load" t0 "loadeddata"
audioElement.addEventListener("loadeddata", function(){
audioElement.play();
}, true);
}
$(function(){
$('.play').click(playMusic);
});
Although you could probably be better off having a static audio element and changing the src attribute on user clicks rather than creating a new audio element.
// example
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function() {
this.play();
}, true);
function playMusic() {
var audioElementSrc = $(this).attr('data-audio-src');
audio.setAttribute('src', audioElementSrc);
};
$('.play').click(playMusic);
There is a framework for this that is worth checking out. ListenJS. I wrote it :)
Try something like this:
<audio id="sound">
<source src="music/classical/open.mp3" type="audio/mpeg">
</audio>
And from code:
$(function(){
$('#sound').get(0).play();
});

playing audio when button clicked and then stops and new audio plays when different button clicked

When a user clicks on a buttone it plays audio, but when they click on another button that audio stops and it then plays audio for that button and so forth. at the moment when the page loads i also have background music which autoplays, I am trying to figure out how to stop the music playing when a new button is pressed and then that music plays as currently they overlap. Any help would be greatly appreciated.
on load background music code:
<audio autoplay="autoplay" class="bondAudio">
<source src="audio/Bond.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
button clicked audio plays code:
<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'audio/Dr-No.mp3');
audioElement.setAttribute('play', 'play');
//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('#blockLink1').click(function() {
audioElement.play();
});
});
</script>
Why are you creating elements using pure js when you have jQuery?
<script>
$(document).ready(function() {
var audioElement = $('<audio></audio>');
audioElement.attr('src', 'audio/Dr-No.mp3');
audioElement.attr('play', 'play');
//audioElement.load()
$.get(); // ?
audioElement.on("load", function() {
audioElement.get(0).play();
}, true);
$('#blockLink1').click(function() {
$('audio').each(function() {
this.stop();
});
audioElement.get(0).play();
});
});
</script>

HTML Video - Actions OnEnd not Working

I am having trouble getting the onended function to work with my HTML video. It doesnt have to be onended but basically I want a series of things to happen when the video has ended.
Code is as follows:
<script language="JavaScript" type="text/javascript">
window.onload = playVideo;
function playVideo()
{
var video = document.getElementById("video");
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.onclick = function()
{
if (video.paused)
{
video.play();
button.innerHTML = "Pause";
message.value = "The video is playing, click the Pause button to pause the video.";
}
else
{
video.pause();
button.inerHTML = "Play";
message.value = "The video is paused, click the Play button to play the video.";
}
video.onended = function(e)
{
button.innerHTML = "Play";
message.value = "The video has ended, click Play to restart the video."
}
}
}
</script>
<button type="button" id="playpause" onclick="playVideo()">Play</button>
<br>
<video id="video" width="320" height="240">
<source src="Video/movie.mp4" type="video/mp4">
<source src="Video/movie.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<br />
<textarea id="videoinfo" cols="90">
Click the Play button to start the video.
</textarea>
Thanks for the help
EDIT: I cannot post my own answer for 8 hours with 10 or less reputation, so I have to edit:
After 2 days of trying to get this to work, I post a question on here so I can figure it out. Less than 10 mins later I manage to get it to work.
I used an onEnded function in the <video> tag and linked that to a javascript function called videoEnded().
See below:
<script language="JavaScript" type="text/javascript">
function playVideo()
{
var video = document.getElementById("video");
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.onclick = function()
{
if (video.paused)
{
video.play();
button.innerHTML = "Pause";
message.value = "The video is playing, click the Pause button to pause the video.";
}
else
{
video.pause();
button.inerHTML = "Play";
message.value = "The video is paused, click the Play button to play the video.";
}
}
}
function videoEnded()
{
var message = document.getElementById("videoinfo");
var button = document.getElementById("playpause");
button.innerHTML = "Play";
message.value = "The video has ended, click Play to restart the video.";
}
</script>
Hope this can help someone else out. I have searched for days looking for an answer and nothing would work.
Thanks
if(Video.ended)
// Code when video ends.
EDIT: sorry for don't give any other explanation, but, have you tried by using .addEventListener method instead? and in which Browser do you develop / debug?

Categories