We Keep Coding

Audio does not play when first clicked, only after second click (Javascript)

Add added audio to my simple website and when i first click the button the audio does not play. After the second click it will play. If I wait a while then the problem will return.
There are no errors in the console and I even see chromes speaker icon on the tab but hear nothing.
Play
<script src="index.js"></script>
<script type="text/javascript">
// play audio on button click
document.getElementById('play').addEventListener('click', function () {
var audio = new Audio()
audio.src = '1.ogg'
// listen for can play event
audio.addEventListener('canplay', function () {
audio.play()
})
});
</script>
I also tried howler.js but the same problem happened.

<script type="text/javascript">
// play audio on button click
document.getElementById('play').addEventListener('click', function () {
var audio = new Audio();
audio.src = '1.ogg';
// added a volume value
audio.volume = 1;
// listen for can play event
audio.addEventListener('canplay', function () {
// try a console log to see if the function is called correctly
console.log("hello");
audio.play();
})
});
</script>
i added a console log to see if your function is really called
and put an volume so you are sure that the volume is not 0

Works fine
document.getElementById('play').addEventListener('click', function() {
var audio = new Audio()
audio.src = 'https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3'
audio.addEventListener('canplay', function() {
audio.play()
})
});
<button id="play">play</button>

html audio - manually stop audio, raising ended event

Can I stop an html audio manually in a way that it raises the "ended" event?
<script>
var audio = new Audio();
audio.src = "https://translate.google.com/translate_tts?&q=text&tl=en&client=a"
audio.play();
audio.addEventListener("ended", function() {
console.log("audio ended");
});
audio.addEventListener("play", function() {
window.setTimeout(function() {
audio.pause(); //stop audio half sec after it starts - this doesn't raise the "ended" event!
}, 500);
});
</script>

You can do that but its on timeupdate event folowing code with jQuery and JS respectively
<audio ontimeupdate="watchTime4Audio(this.currentTime,this.duration)" ... ></audio>
IN HTML
//jQuery
$('audio').on('timeupdate',function(){
if($(this).prop('currentTime')>=$(this).prop('duration')){
//the song has ended you can put your trigger here
}
});
//JS
audio.addEventListener('timeupdate', function() {
if(this.currentTime >= this.duration){
//the song has ended you can put your trigger here
}
});
Using Javascript/JQuery

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();
});

Minimalistic play() and pause() audio solution

I found a little code snippet within another question, playing an mp3 just with jquery play() and pause():
<a href="#" rel="http://www.uscis.gov/files/nativedocuments/Track%2093.mp3"
class="play">Play</a>
<div class="pause">Stop</div>
<script>
$(document).ready(function() {
var audioElement = document.createElement('audio');
var source = $('.play').attr('rel');
audioElement.setAttribute('src', source);
//audioElement.setAttribute('autoplay', 'autoplay');
audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('.play').click(function() {
audioElement.play();
});
$('.pause').click(function() {
audioElement.pause();
});
});
I get the audio source from the rel attribute of the "play"-link. Now I would like to add more audio links and make the source relative to their rel attributes.
I tried
var source = $(this).attr('rel');
and also .find() and .each(), but nothing worked so far. I've set up a jsfiddle with two audio links, where only the first audio file will be played. (The fiddle links to an external script, which the client uses on his site, where only jquery 1.4.3 is loaded, but I guess it's possible anyway. I just don't want to use an audio player plugin, I aim for a minimalistic solution.)
Any help would be highly appreciated!

You can update your script to create one audio tag per container:
$(document).ready(function () {
// For each container div
$(".container").each(function() {
// Create the HTML5 <audio> tag
var audioElement = document.createElement('audio');
// Find the play/pause buttons
var $play = $(this).find(".play");
var $pause = $(this).find(".pause");
// Load the source from the play button
var source = $play.attr('rel');
audioElement.setAttribute('src', source);
$.get();
// Play the sound when loaded
audioElement.addEventListener("load", function () {
audioElement.play();
}, true);
// When the user clicks on the play button, play the audio
$play.click(function () {
audioElement.play();
});
// When the user clicks on the pause button, pause it
$pause.click(function () {
audioElement.pause();
});
});
});
And updated Fiddle: http://jsfiddle.net/sY7UT/

HTML5/JavaScript/jQuery audio playlist

I've got this JavaScript/jquery code:
$(document).ready(function() {
var audioElement = document.createElement('audio');
var secondtrack = 'hangover.ogg';
audioElement.setAttribute('src', 'hangover.ogg');
audioElement.load()
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
$('#play').click(function() {
audioElement.play();
});
$('#pause').click(function() {
audioElement.pause();
});
});
How could I get another song started after the first ended?

The AUDIO element should fire a "ended" event though I am not sure how well this is supported at the moment.
So you could try something like that:
audioElement.addEventListener('ended', function () {
// Play another song
});
See also:
http://dev.w3.org/html5/spec/Overview.html#event-media-ended