I have a simple angular application that has an audio player integrated.
<audio id="passage-audio" class="passage" controls ontimeupdate="document.getElementById('tracktime').value = this.currentTime ;">
<source src="Luke.2.1-Luke.2.20.mp3" type="audio/mp3">
<em class="error"><strong>Error:</strong> Your browser doesn't appear to support HTML5 Audio.</em>
</audio>
the audio player has an event called "ontimeupdate", this will update the time in the html element with the id "tracktime". This works fine.
What i would like to do is to use "ontimeupdate" to invoke a function in the controller. Right now it is not has access to the class.
<audio id="passage-audio" class="passage" controls (ontimeupdate)="updateTime()">...
</audio>
I there a way to accomplish this?
If i write an audio directive will i be able to access this event?
Thanks
Try <audio ... (timeupdate)="updateTime()">
Not sure what you want, but if it is to update you angular app at each timeupdate, you can accomplish this by calling $scope.$apply() and passing a $scope function.
this is working fine for me
function onChangeAudio(event) {
var durration = event.srcElement.duration;
alert("call")
}
<audio controls class="w-100" id="audio" (timeupdate)="onChangeAudio($event)">
<source src="..." type="audio/ogg">
<source src="..... " type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Related
I have seen a method to disable right click, but I was wondering how do you disable it on HTML5 audio.
I have seen examples for disabling right click using a line of JS, but however it does not work on DOM.
JS:
document.addEventListener('contextaudio', event => event.preventDefault());
HTML:
<audio controls controlslist="nodownload" name="media">
<source
src="test.mp3"
type="audio/mp3"
/>
</audio>
Just simply add oncontextmenu= "return false;" like this:
<audio oncontextmenu="return false;" controls controlslist="nodownload" name="media">
<source src="cool.mp3" type="audio/mp3"/>
</audio>
Consider a simple `HTML5 audio player as (live example)
<audio controls>
<source src="https://hpr.dogphilosophy.net/test/flac.flac" type="audio/flac">
</audio>
<br />
<dic class="capture">
Click here to get the current played time (elapsed time)
</dic>
Can we create a javascript event to catch the elapsed time of the playing audio by clicking on an HTML element?
Use currentTime to get the current timestamp, e.g.:
var audio = document.getElementById("audio-element");
document.getElementById('capture').addEventListener('click', () => {
console.log(audio.currentTime);
});
<audio id="audio-element" controls>
<source src="https://hpr.dogphilosophy.net/test/flac.flac" type="audio/flac">
</audio>
<br />
<button id="capture">
Click here to get the current played time
</button>
I believe HTML audio has a built in currentTime property that you could use to get the point in the audio where you're currently at:
https://www.w3schools.com/tags/av_prop_currenttime.asp
Is this what you're looking for?
I am building a php page that generates html5 audio elements from an rss feed.
<? foreach($tracks as $track){ ?>
<audio controls >
<source src="<?= $track['track_url'] ?>" type="audio/mpeg">
<source src="<?= $track['track_url'] ?>" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<? } ?>
There are about 300 tracks in this case so I do not load them all at once (the above code is to illustrate the concept).
I load a few tracks initially, then load additional tracks as the user scrolls down.
You can check out the page here: http://canneconomy.com/podcast
The first few tracks load and play without issues. However, after 10 or so tracks are loaded, the user is no longer able to play the HTML5 audio elements. I believe this is because all of the sockets are occupied and no more can be used.
My proposed solution is to prevent the HTML5 audio elements from automatically reserving sockets as they are generated and manage this process manually. A socket would only be used when a user clicks the play button. Hitting another play button would free all sockets and occupy only one.
How would one go about managing socket connections manually? This is a PHP/jQuery app.
You can achieve your desired behaviour by adding preload="none" to each audio item which will prevent the initial download of the file until a user clicks on the play button.
Also from looking at your source your attempting to stop the player above when the user plays the next item onplay="stop('trk2',300)", but that's a little optimistic that the user will traverse down the list instead of skipping a couple etc.
You can fix this issue by listening for a play event and then iterating over all players, then pausing them if it's not the target player.
A couple of very simple changes, for example:
<audio controls preload="none" id="trk1" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Paul_Final_-_12_15_17_1.55_PM.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Paul_Final_-_12_15_17_1.55_PM.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<audio controls preload="none" id="trk2" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Lori_Final_-_12_15_17_12.19_PM.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Lori_Final_-_12_15_17_12.19_PM.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<audio controls preload="none" id="trk3" class="ht5player" style="width:100%">
<source src="http://traffic.libsyn.com/canneconomy/Sabrina_Final_-_12_13_17_5.03_PM_1.mp3?dest-id=271554" type="audio/mpeg">
<source src="http://traffic.libsyn.com/canneconomy/Sabrina_Final_-_12_13_17_5.03_PM_1.mp3?dest-id=271554" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<script type="text/javascript">
document.addEventListener('play', function(e){
var audio_elms = document.getElementsByTagName('audio');
for (var i = 0, length = audio_elms.length; i < length; i++) {
if (audio_elms[i] != e.target) {
audio_elms[i].pause();
}
}
}, true);
</script>
^^^ run the snippet to see it in action.
I have a problem with getting sound to play and pause within my JS and HTML code.
I have a function that takes the two tracks inputted, pauses one, and plays another, for use to create dynamic music based on where the user is or what it is doing. However when the function is called, neither track is played or paused. I've looked up online to make sure that I'm using the proper audio formatting and from my research I have been. I'm currently stumped as to why this isn't working so a fresh set of eyes may help to figure out the problem.
My Javascript:
function playTrack(musicon, musicoff) {
document.getElementById(musicon).play();
document.getElementById(musicoff).pause();
}
My HTML
<audio id="themeD" autoplay="autoplay" loop="true">
<source src="d.ogg" type="audio/ogg" />
<source src="d.mp3" type="audio/mpeg" />
</audio>
<audio id="themeE" loop="true">
<source src="e.ogg" type="audio/ogg" />
<source src="e.mp3" type="audio/mpeg" />
</audio>
<a class="button" onclick="javascript:playTrack('ThemeE','ThemeD');">Change audio</a>
Somewhat of a beginner with Javascript and definitely a noob with audio elements so any and all help or tips would be appreciated.
Watch your spaces. You play the audio with the id Theme E, but the id of your audio is themeE
Here is my code:
Html:
<div id="audio-files" style="display: none;">
<audio id="click-sound">
<source src="/assets/click.mp3" type="audio/mpeg">
<source src="/assets/click.wav" type="audio/wav">
</audio>
</div>
JavaScript:
play: function() {
var audio = $('#audio-files').find('audio#click-sound');
if (audio.length) {
audio[0].play();
}
}
Desired behaviour:
When I call play(), the sound should play once. There should be only 1 request to the server - on page load. Multiple calls to play() should not trigger multiple requests.
Actual behaviour:
- Firefox (19.0.2), Chrome(26.0.1410.43) and Opera(12.15) work as expected.
- Safari (6.0.3) plays the desired sound only once, then refuses to play it or any other sound when asked to.
I tried adding audio[0].load() before audio[0].play() but this causes the browser to make a request each time it is asked to play the audio, which is totally undesirable.
Fiddle: http://jsfiddle.net/Tpvfm/
I think there is a problem with your example mp3 file.
I just removed it (mp3) from your fiddle and it works in my Safari on OSX.
<div id="audio-files" style="display: none;">
<audio id="click-sound">
<source src="/assets/click.wav" type="audio/wav">
</audio>
</div>
Fiddle: 73GCX