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
Related
Goal:
I am trying to implement a control with as little code clutter as possible that will allow the change of quality of a video.
Preferences:
The following is what I am given, and I would rather work around it. I am open to using pre-built plugins or a javascript/jquery hack, but would rather not go for a solution that involves reinventing (me or you) the wheel (require the building of a custom video control scheme), but would take it as a last result.
EDIT:
Sorry. Did not mean to have that correlation, as the urls did not reflect any sort of pattern. I oversimplified it, not assuming people would look at the urls for a pattern. But thank you for that start, as I can probably work with that. Sorry again. I will change the urls to not have any pattern.
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
Thank you in advance for anybody who can give some insight.
Sorry for asking. Turns out I was able to solve it pretty much all by myself. Hate those moments. Here is the solution I came up with, which just involves copying the <source> I need based on the label attribute, deleting it, and prepending it into the <video> element:
HTML
<div class='vidcontainer'>
<select class='qualitypick' autocomplete='off'>
<option selected>fullHD</option>
<option>720p</option>
<option>360p</option>
</select>
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
</div>
JQUERY
$(document).ready(function(){
$('.qualitypick').change(function(){
//Have several videos in file, so have to navigate directly
video = $(this).parent().find("video");
//Need access to DOM element for some functionality
videoDOM = video.get(0);
curtime = videoDOM.currentTime; //Get Current Time of Video
source = video.find("source[label=" + $(this).textContent + "]"); //Copy Source
source.remove(); //Remove the source from select
video.prepend(source); //Prepend source on top of options
video.load(); //Reload Video
videoDOM.currentTime = curtime; //Continue from video's stop
videoDOM.play(); //Resume video
})
})
Although this was not my intention, I hope my answer is of some use. Sorry again for asking before thinking it through.
You don't need many source tags. One is enough, however, you need to change the value of the source attribute, which is src.
var map={'fullHD':'1080p','720p':'720p','360p':'360p'};
function changeQ(quality){
$('source','video#player').attr('src','http://v.com/'+map[quality]);
$('span#pp').html(map[quality]);
console.log($('source','video#player').attr('src'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Quality
(<span id="pp"></span>)</button>
<ul class="dropdown-menu">
<li>FullHD</li>
<li>720p</li>
<li>360p</li>
</ul>
</div>
<video id="player" width="400" controls>
<source src="http://v.com/1080p" type="video/mp4">
</video>
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 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>
I am trying to change videos dynamically in my web page using JavaScript. The first video (.mp4 format) file is playing well, but when I click the button to change the video, it is showing some black screen instead of playing next video.
I tried in many ways to solve this issue by reading many Stack Overflow articles, but it is still not working.
Could anyone please guide me to solve this issue?
My JavaScript code:
function vidSwap() {
var player = document.getElementById("player");
player.pause();
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
document.getElementById("mp4").src = "D:\movies\Telugu\movie2.mp4";
document.getElementById("ogg_src").src = "D:\movies\Telugu\movie2.ogg";
player.load();
player.play();
}
My HTML Code:
<video id="player" height="380" width="440" controls>
<source id="webm" src="D:\movies\Telugu\movie1.webm" type="video/webm" />
<source id="mp4" src="D:\movies\Telugu\movie1.mp4" type="video/mp4" />
<source id="ogg_src" src="D:\movies\Telugu\movie1.ogg" type="video/ogg" />
</video>
<br>
<br>
<input type="button" value="Next Video Clip" onclick="vidSwap()" />
Your problem is in the vidSwap function: When you're setting the src attribute of each of the elements, the backslashes in the strings you're using are being interpreted as escaped characters.
document.getElementById("webm").src = "D:\movies\Telugu\movie2.webm";
// ^^ ^^ ^^
You need to escape the backslash characters by adding an extra backslash before each (\\), like so:
document.getElementById("webm").src = "D:\\movies\\Telugu\\movie2.webm";
// Repeat for each string
Happy coding!
At the moment I am using sounds on my website using an old technique with embedded tags and javascript . I want to convert these to HTML5, but I am unsuccessful doing this.
This is the code I have at the moment:
HTML:
<div class="au">
<embed src="audio/tileSelect.wav" autostart="false" width="1" height="1" hidden="true" id="sound1" enablejavascript="true">
<embed src="audio/tileRemove.wav" autostart="false" width="1" height="1" hidden="true" id="sound2" enablejavascript="true">
</div>
JS:
//Sounds
function playSound(soundobj) {
if (document.getElementById('sound').checked) { //if this checkbox is checked, play sounds
var thissound=document.getElementById(soundobj);
thissound.Play();
}
}
JS used in other functions to trigger the sounds:
playSound('sound1');
playSound('sound2');
So all the above works. Now to convert this to HTML5. The HTML part is easy, I think it should look like this:
HTML5:
<!--HTML5 audio-->
<audio id="sound1" preload="auto">
<source src="audio/tileSelect.wav" type="audio/wav" />
</audio>
<audio id="sound2" preload="auto">
<source src="audio/tileRemove.wav" type="audio/wav" />
</audio>
But for the JS part I am kinda stuck. Anyone has an idea about this? Tried to change soundobj to soundid, but had no luck with that.
Many thanks,
Maurice
There are two issues with the code you have posted.
First one would be the markup that should probably read like this instead:
<audio id="sound1" src="audio/tileSelect.wav" preload="auto"></audio>
<audio id="sound2" src="audio/tileRemove.wav" preload="auto"></audio>
The <video>-like source notation that you used is not documented anywhere (although I have to admit that it does not feel wrong - but then again I have never used HTML5 audio yet), see MDN documentation
EDIT: Apparently it's ok to use source elements inside audio elements:
Permitted content: Transparent content, containing either a src
attribute or one or more elements, followed by either flow
content or phrasing content , with no or elements.
See: https://developer.mozilla.org/en/HTML/Element/audio
Still you don't really need it in your case as you just have one source file.
Second issue would be that you are using a non-existent method of .Play() (capital P), that should be called .play(). So your JS should look like:
function playSound(soundobj) {
if (document.getElementById('sound').checked){
document.getElementById(soundobj).play();
}
}
playSound('sound2'); //should play 'audio/tileRemove.wav'