Bevour you mark this as "old", I've searched the whole www for a solution, but I can't find one.
I am making a WebApp that plays sound-effects. I've created a var audio = new Audio() element, and changed his src to the URL of the sound-effect. When I call the audio.play() function, it starts playing the sound effect. In normal safari it works, but when I set apple-mobile-web-app-capable to true in a meta-tag, the WebApp crashes. I tried also to use a hard coded audio tag, to create a audio tag using javascript and to populate a div with a audio-element and it didn't work.
var audio = new Audio;
function set(src){ audio.src = src; }
function play() { audio.play(); }
function pause() { audio.pause(); }
<button onClick="set('https://incompetech.com/music/royalty-free/mp3-royaltyfree/Thief%20in%20the%20Night.mp3')">Set sound</button>
<button onClick="play()">Play sound</button>
<button onClick="pause()">Pause sound</button><br /><br />
<b>Music:</b> "Thief in the Night" Kevin MacLeod (incompetech.com) Licensed under Creative Commons: By Attribution 3.0 License http://creativecommons.org/licenses/by/3.0/
Tnx in advance, Stephan
Related
Im trying to show embedded video within Android WebView, but currently i have nothing but a plain white screen.
This is a code provided from Nest for embedded video:
"<iframe type="text/html" frameborder="0" width="480" height="394" src="//video.nest.com/embedded/live/Es9Ol5DCCB?autoplay=1" allowfullscreen></iframe>
This is how I'm trying to use in im my app:
WebView webview = view.findViewById(R.id.camera_view);//new
WebView(view.findViewById(R.id.camera_view));
webview.getSettings().setPluginState(WebSettings.PluginState.ON);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setAllowFileAccess(true);
webview.setWebChromeClient(new WebChromeClient());
webview.setWebViewClient(new WebViewClient());
String html = "<iframe type=\"text/html\" frameborder=\"0\" width=\"480\" height=\"394\" src=\"//video.nest.com/embedded/live/Es9Ol5DCCB?autoplay=1\" allowfullscreen></iframe>";
webview.loadDataWithBaseURL("video.nest.com",html, "text/html", null, null);
Am i missing some permissions here?
I am able to render videos from Nest camera with the following code.
First of all please make sure public_share_url is enabled for your camera.
Instead of loading URL in iFrame I have used video url directly.
String iFrameUrl =
"https://video.nest.com/embedded/live/Es9Ol5DCCB?autoplay=0";
WebSettings webViewSettings = webView.getSettings();
webViewSettings.setJavaScriptEnabled(true);
webViewSettings.setLoadWithOverviewMode(true);
webViewSettings.setUseWideViewPort(true); webView.loadUrl(iFrameUrl);
Happy coding!
I need to play a video within an UIWebiview which comes from youtube.
Everything was working fine on older devices (5.1+)
Unfortunately on iOS7 the video is not playing. It starts loading but it'll never start playing. Even if the video has fully been loaded. Only if you stop and press play manually the video starts playing.
Here's some code:
- (void)viewDidAppear:(BOOL)animated;
{
[super viewDidAppear:animated];
if(!self.viewMoviePlayerView.superview) {
[self.viewMediaContentContainer addSubview:self.viewMoviePlayerView];
}
self.viewMoviePlayerView.isScrollingEnabled = NO;
[self.viewMoviePlayerView loadRequest:[NSURLRequest requestWithURL:
[NSURL URLWithString:
[NSString stringWithFormat:#"%#%#", #"http://www.youtube.com/embed/", self.currentSelectedItem.guid]]]];
...
}
Any suggestions on that?
Autoplay is not allowed on recent versions of iOS. You don't suppose to programmatically start downloading data that could cause a cost to the user. I found a way but it's a little tricky:
Show an html string in stead of an url
[webview loadHTMLString:<html> baseURL:[[NSBundle mainBundle] resourceURL]];
The html needs to be an embed player:
<html>
<body style='margin:0px;padding:0px;'>
<script type='text/javascript' src="http://www.youtube.com/iframe_api"></script>
<script type='text/javascript'>
function onYouTubeIframeAPIReady(){
ytplayer=new YT.Player('playerID',{events:{onReady:onPlayerReady, onStateChange:onPlayerStateChange}});
}
function onPlayerReady(a){ a.target.playVideo(); }
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.BUFFERING) {
event.target.playVideo();
}
}
</script>
<iframe id='playerID' type='text/html' width='320' height='240'
src="http://www.youtube.com/embed/xxxxxxxxxxx?enablejsapi=1&rel=0&playsinline=1&autoplay=1" frameborder='0'></iframe>
</body>
</html>
this works fine because the javascript in the iframe API it forces the player to start playing once it loads and every time it starts buffering. I strongly suggest you to read about the youtube API
Put your video id in the embed and thats it!
In my HTML page I have 9 images for dialing numbers and one text box that shows the pressed numbers. I want each of those images to immediately play beep sound when users click on them. I tried to use embed with hidden property and navigate it's source to .wav sound.
It is working OK, but when I press the images one after another immediately, it cannot play sound and just bees once at the end.
Is there any faster way of playing a .wav sound on 'onclick' method?
If you only need to support recent browsers, then HTML 5 offers you the Audio object
to load/buffer your sound:
var snd = new Audio("file.wav");
to play the sound:
snd.play();
to re-cue it to the beginning (so that you can play it again):
snd.currentTime=0;
This answer https://stackoverflow.com/a/7620930/1459653 by #klaustopher (https://stackoverflow.com/users/767272/klaustopher) helped me. He wrote:
HTML5 has the new <audio>-Tag that can be used to play sound. It
even has a pretty simple JavaScript Interface:
<audio id="sound1" src="yoursound.mp3" preload="auto"></audio>
<button onclick="document.getElementById('sound1').play();">Play
it</button>
Here's how I implemented his advice so that clicking on the Font Awesome icon "fa-volume-up" (located on the Web page after "mule.") results in "donkey2.mp3" sound playing (note: mp3 doesn't play in all browsers).
<p>In short, you're treated like a whole person, instead of a rented mule. <audio id="sound1" src="assets/donkey2.mp3" preload="auto"></audio><a class="icon fa-volume-up" onclick="document.getElementById('sound1').play();"></a>
You can use embed element for play sounds, but you've to check the formats supported by the different browsers.
Embed element on MDN
<a onclick="playSound('1.mp3')">
<img src="1.gif">
</a>
<div id="sound"></div>
<script>
var playSound = function (soundFile) {
$("#sound").html("<embed src=\"" + soundFile + "\" hidden=\"true\" autostart=\"true\" />");
}
</script>
This code lets you put in a picture button; when click you get a sound. It works with Google Chrome and Microsoft Edge but I can't get it to work in Internet Explorer. I'm using html 5 codes; please copy and paste and add you own samples.
</head>
<body>
<script>
var audio = new Audio("/Sample.wav ");
audio.oncanplaythrough = function ( ) { }
audio.onended = function ( ) { }
</script> <input type="image" src="file://C:/Sample.jpg" onclick="audio.play ( )">
</body>
</html>
more on codes look at
http://html5doctor.com/html5-audio-the-state-of-play/
Example based on accepted answer (Tested in Chrome 70), but I didn't need to re-cue:
<button onclick="snd.play()"> Click Me </button>
<script>
var snd = new Audio("/Content/mysound.wav");
</script>
This is what I would do to play sound effects:
<html>
<body>
<audio id="sfx"><source src="mysound.mp3"></audio>
<button onclick="playsound()" id="button">Play a sound!</button>
<script> function playsound() {
var sfx = document.getElementById("sfx");
sfx.autoplay = 'true';
sfx.load();}
Or you can run this snippet:
function playsound() {
var mysound = document.getElementById("mysound");
mysound.autoplay = 'true';
mysound.load();
}
button {
color: blue;
border-radius: 24px;
border: 5px solid red;
}
body {
background-color: #bfbfbf;
}
<html>
<body>
<audio id='mysound'><source src="click.mp3"><!-- "click.mp3" isn't a sound effect uploaded to the snippet, because I don't think you can upload sfx to snippets. (I'm new to stackoverflow, so there might be a way) But if you actually use a sound effect in that folder that you're using, it works. --></audio>
<button id='btn' onclick='playsound()'>Play a sound!</button>
</body>
</html>
I'm trying to display a div inside tab playlists if the href contains a spotifyURI. This will be used to display a playlist under a tab.
Step by step this is my problem:
Click playlist tab and then click the "My playlist1".
The href is displayed in the playlist container under the tab playlists. (perfect so far)
Click the start tab and then click the playlists tab.
Instead of displaying the list of playlists the playlist container is show again. So the last used url is cached?
Then if the playlists tab is clicked again the url will be "reseted" and the list of playlists will be shown and playlist container hidden.
I'd like 4. to show the playlist list right away instead.
Is there a way to reset or what am I missing?
<script>
$(document).ready(function() {
sp = getSpotifyApi(1);
var m = sp.require("sp://import/scripts/api/models");
updateTabs();
m.application.observe(m.EVENT.ARGUMENTSCHANGED, updateTabs);
function updateTabs()
{
console.log(m.application.arguments);
var args = m.application.arguments;
$('.section').hide();
if (args[1] == "spotify") $("#playlist").html("args:"+args).show();
else $("#"+args[0]).show();
}
});
</script>
<div id="playlist" class="section">Container for playlist content</div>
<div id="start" class="section">Welcome</div>
<div id="playlists" class="section">
My playlist1
My playlist2
</div>
Thanks alot for all replys!
Here is how I will proceed using JQuery.
First of all you need to use the Localstorage :
var stor = sp.require("sp://import/scripts/storage");
Then if for exemple you get a list of playlist you can build the list like this
for (var i=0; i<d.playlists.length; i++) {
$('#playlists').append('My <a id="p' + i + '"href="'+ d.playlists[i] +'">playlist1</a>');
$('#playlists #p'+i).live('click', function(e) {
e.preventdefault();
stor.set('choosenplaylist', d.playlists[i]);
});
}
This was for the storage now for when changing tad :
if (!stor.get('choosenplaylist')=='') {
location.href=stor.get('choosenplaylist');
}
Okay this is a suggestion and it need to be tested regarding to your app.
Im trying this out now, and i can reproduce your bug (im guessing it's a bug, the tab should replace the url in my opinion)
But, until it's fixed, my best guess is to capture the playlist links in an event handler and cancelling the original event, after cancelling you replace the content with the appropriate playlist view.
Tab test code (on gist.github.com)
I've abstracted the actual view binding from the event handler, and added a click event hook that calls the abstract view binder instead of the "real" one, this also supports deep linking into the an app
I'm kind of like stuck trying to implement YUI autocomplete textbox. here's the code:
<div id="myAutoComplete">
<input id="myInput" type="text" />
<div id="myContainer"></div>
</div>
<script type="text/javascript">
YAHOO.example.BasicRemote = function() {
oDS = new YAHOO.util.XHRDataSource("../User/Home2.aspx");
// Set the responseType
oDS.responseType = YAHOO.util.XHRDataSource.TYPE_TEXT;
// Define the schema of the delimited results
oDS.responseSchema = {
recordDelim: "\n",
fieldDelim: "\t"
};
// Enable caching
oDS.maxCacheEntries = 5;
// Instantiate the AutoComplete
var oAC = new YAHOO.widget.AutoComplete("myInput", "myContainer", oDS);
oDS.generateRequest = function(sQuery) {
return "../User/Home2.aspx?method=" + "SA&Id="+document.getElementById("lbAttributes")[document.getElementById("lbAttributes").selectedIndex].value +"&query="+sQuery;
};
oAC.queryQuestionMark =false;
oAC.allowBrowserAutoComplete=false;
return {
oDS: oDS,
oAC: oAC
};
}
</script>
I've added all the yahoo javascript references and the style sheets but it never seems to make the ajax call when I change the text in the myInput box and neither does it show anything... I guess I'm missing something imp...
#Kriss -- Could you post a link to the page where you're having trouble? It's hard to debug XHR autocomplete without seeing what's coming back from the server and seeing the whole context of the page.
#Adam -- jQuery is excellent, yes, but YUI's widgets are all uniformly well-documented and uniformly licensed. That's a compelling source of differentiation today.
To be honest, and I know this isn't the most helpful answer... you should look into using jQuery these days as it has totally blown YUI out of the water in terms of ease-of-use, syntax and community following.
Then you could toddle onto http://plugins.jquery.com and find a whole bunch of cool autocomplete plugins with example code etc.
Hope this helps.