Below is the sample for audio player:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<script>
audiojs.events.ready(function() {
audiojs.createAll();
});
</script>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" preload="auto"></audio>
</body>
</html>
With this, I want to add some constraints like don't want to show the play button.Instead it will automatically play after 10 secs and it can play only once. How can I do with this. If anyone knows solution please help me to get out of this issue. Reference. https://kolber.github.io/audiojs/
You can hide the play/pause button by changing its style of .play-pause to display:none
Set autoplay to false to avoid playback at load and use setTimeout to play after 10 sec.
Refer below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>audio.js</title>
<script src="./audiojs/audio.min.js"></script>
<link rel="stylesheet" href="./includes/index.css" media="screen">
<style>
.play-pause {
display: none;
}
.scrubber {
display: none;
}
.audiojs {
width: 110px;
}
.audiojs .time {
border-left: none;
}
</style>
</head>
<body>
<header>
<h1>audio.js</h1>
</header>
<audio src="http://kolber.github.io/audiojs/demos/mp3/juicy.mp3" id="player"></audio>
<label id="audio_stats"></label>
<script>
var element = document.getElementById("player");
var settings = {
autoplay: false,
loop: false,
preload: true,
swfLocation: 'audiojs/audiojs.swf',
trackEnded: function (e) {
document.getElementById("audio_stats").innerText = "Track Ended...";
}
}
audiojs.events.ready(function () {
var a = audiojs.create(element, settings);
var count = 11;
var counter = setInterval(timer, 1000);
function timer() {
count = count - 1;
if (count <= 0) {
clearInterval(counter);
a.play();
document.getElementById("audio_stats").innerText = "Playing...";
return;
}
document.getElementById("audio_stats").innerText = "Will Start in " + count + " sec.";
}
});
</script>
</body>
</html>
Related
I want to convert a website into an android app using Apache Cordova and visual studio 2015. Below is my index.html code:
<!doctype html>
<html lang="en">
<head>
<title>Zoggle</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
//navigator.splashscreen.hide();
if (navigator.network.connection.type == Connection.NONE) {
networkError()
} else {
loadApp()
}
}
function loadApp() {
navigator.app.loadUrl("http://zoggle.zolmeister.com")
}
function networkError() {
navigator.notification.alert('Zoggle requires an internet connection')
var $net = document.createElement('div')
$net.innerHTML = 'Zoggle requires an internet connection'
document.body.appendChild($net)
}
</script>
<style>
body {
padding: 15px;
background: #23252e;
color: #01ced3;
text-align: center;
}
div {
font-size: 20px;
}
</style>
</head>
<body>
</body>
</html>
When I run the code, it shows me a blank black page. I want to load the web page the link is given..Please Help.
You can use Inappbrowser Plugin to load the website in your app
http://www.plugreg.com/plugin/apache/cordova-plugin-inappbrowser
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/
Getting error
"11-13 13:10:55.470: E/Web Console(9799):
Uncaught Error: TYPE_MISMATCH_ERR: DOM Exception 17 at
file:///android_asset/www/index.html:304"
when converting html div content to canvas in android with phonegap.
It is working properly on browser. Any help will be appreciated. I am using jQuery-1.9.1, jQuery-UI.
code snippet:
// html file
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="resourcess/css/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/jquery.plugin.html2canvas.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="resourcess/css/style.css" />
</head>
<body>
<div class="imag-container">
<div class="dragImg">
<div id="dropHere"></div>
<div id="click" > click </div>
<div id="img-check">check</div>
<canvas id="canvas" width="100" height="100">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</body>
// script
$(function(){
//Make every clone image unique.
var counts = [0];
var resizeOpts = {
handles: "all" ,autoHide:true
};
$(".dragImg").draggable({
helper: "clone",
//Create counter
start: function() { counts[0]++; }
});
$("#dropHere").droppable({
drop: function(e, ui){
if(ui.draggable.hasClass("dragImg")) {
$(this).append($(ui.helper).clone());
//Pointing to the dragImg class in dropHere and add new class.
$("#dropHere .dragImg").addClass("item-"+counts[0] );
$("#dropHere .img").addClass("imgSize-"+counts[0]);
//Remove the current class (ui-draggable and dragImg)
$("#dropHere .item-"+counts[0]).removeClass("dragImg ui-ggable ui-draggable-dragging");
$(".item-"+counts[0]).dblclick(function() {
$(this).remove();
});
make_draggable($(".item-"+counts[0]));
$(".imgSize-"+counts[0]).resizable(resizeOpts);
}
}
});
var zIndex = 0;
function make_draggable(elements)
{
elements.draggable({
containment:'parent',
start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
stop:function(e,ui){
}
});
}
$('#click').click(function(){
//Some code
var domElement = document.getElementById('dropHere');
setTimeout(function() {
var canvas = document.getElementById("canvas"),
context = canvas.getContext('2d');
html2canvas(domElement, {
onrendered: function (domElementCanvas) {
var canvas = document.getElementById("canvas");
canvas.getContext('2d').drawImage(domElementCanvas, 0, 0, 50, 50,0,0,100,100);
}
});
}, 10000);
});
});
I am trying to develop an android application which can play audio files, through Phonegap framework.
Below is the code for that, which is not the index.html, but another HTML page in the project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>A New App Try</title>
<!--
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
-->
<script src="/android_asset/www/js/corodova.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/MyownTry.css"/>
<script type="text/javascript" src="cordova.js"></script>
<script src="/android_asset/www/js/jquery-1.10.2.js"></script>
<script src="/android_asset/www/js/jquery.mobile-1.3.2.js"></script>
<link rel="stylesheet" href="/android_asset/www/css/jquery.mobile.structure-1.3.2.css" />
<script type="text/javascript" charset="utf-8">
//Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
/*
function onDeviceReady() {
playAudio("../assets/files/Roja_Flute.mp3");
}
*/
// Audio player
//
var my_media = null;
var mediaTimer = null;
// Play audio
//
function playAudio(src) {
// Create Media object from src
my_media = new Media(src, onSuccess, onError);
if (!playing) {
my_media.play();
document.getElementById('play').src = "/android_asset/www/img/pause_icon.jpg";
playing = true;
} else {
my_media.pause();
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";
playing = false;
}
}
// Pause audio
//
/* function pauseAudio() {
if (my_media) {
my_media.pause();
}
}*/
// Stop audio
//
function stopAudio() {
my_media.stop();
playing = false;
document.getElementById('play').src = "/android_asset/www/img/Playicon.png";}
// onSuccess Callback
//
function onSuccess() {
console.log("playAudio():Audio Success");
}
// onError Callback
//
function onError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
// Set audio position
//
function setAudioPosition(position) {
document.getElementById('audio_position').innerHTML = position;
}
</script>
<style>
img{
width=30%;
}
</style> </head>
<body>
<br/><br/>
<img id="play" src="/android_asset/www/img/Playicon.png"/>
<!-- <img id="pause"src="/android_asset/www/img/pause_icon.jpg" width="20%"/> -->
<img id="stop" src="/android_asset/www/img/stop_icon.jpg" />
<!-- <p id="audio_position"></p>-->
<br/><br/>
Go back to Home Page
<div data-role="footer">
<p>Copyright 2013 | Mani C | newtolearn.android</p>
</div>
</div>
</body>
</html>
I am expecting icons to be smaller ones, as I have defined in the style element, for 30% of image size. And, I am expecting when I click on the Play icon, the audio file to be played.
Unfortunately both the expected behaviors are not occuring. I am seeing a larger 'Play icon', smaller 'Stop icon' and getting, 'Uncaught Reference Exception: variable playAudio is undefined in index.html'(when in fact, the above HTML code has nothing to do with index.html).
Can somebody, please help and can possibly provide a workaround code..?
Thanks in advance!
Mani
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script type="text/javascript" src="/js/lib.min.js"></script>
<style type="text/css">
body{margin: 0;}
</style>
</head>
<body>
<button id="btn1" style="width: 200px; height: 100px;">隐藏</button>
<button id="btn2" style="width: 200px; height: 100px;">显示</button>
<div id="box" style="display none;">
<canvas id="canvas"></canvas>
</div>
</body>
<script type="text/javascript">
$(function() {
var _canvas = document.getElementById("canvas");
_canvas.width = $(document).width();
_canvas.height = $(document).height() - 150;
_stage = new createjs.Stage(_canvas);
var ss = new createjs.SpriteSheet({
images: ["/app/resource/image/trick/animation/cow_basketball/ploughR.png", "/app/resource/image/trick/animation/cow_basketball/ploughL.png"],
frames: {regX: 0, regY: 0, width: 374, height: 200, count: 8},
animations: {right: [0, 3], left: [4, 7]}
});
var bitmap = new createjs.BitmapAnimation(ss);
bitmap.x = 0;
bitmap.y = 0;
bitmap.scaleX = bitmap.scaleY = 1;
ss.getAnimation("right").next = "right";
ss.getAnimation("left").next = "left";
bitmap.gotoAndPlay("right");
_stage.addChild(bitmap);
createjs.Ticker.addEventListener("tick", _tick);
createjs.Ticker.setFPS(10);
var right = true;
function _tick() {
_stage.update();
if(!!right) {
bitmap.x = bitmap.x + 10;
} else {
bitmap.x = bitmap.x - 10;
}
if(bitmap.x > $(document).width()) {
right = false;
bitmap.gotoAndPlay("left");
}
if(bitmap.x < -bitmap.spriteSheet._frameWidth) {
right = true;
bitmap.gotoAndPlay("right");
}
};
$("#btn1").on("click", function() {
$("#box").hide();
});
$("#btn2").on("click", function() {
$("#box").show();
});
});
</script>
</html>
in this case with android samsung phone has some problem like below:
1.click btn1 to hide the div
2.then click btn2 to show the div(normally should be a dynamic picture)
but at this time the page has a static picture stay there more
so,my problem is how this bug appears and how to avoid this bug?
This doesn't look like it is easeljs-related, the only bug that I noticed in your code was:
<div id="box" style="display none;">
should be:
<div id="box" style="display: none;">
So you were missing a colon there, maybe that helps.
I have a PhoneGap application with iScroll4, its basically iScroll example with 2000 list items.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo: iOS Perfect Scrollbar</title>
<link rel="stylesheet" type="text/css" href="css/general.css">
<link rel="stylesheet" type="text/css" href="css/scrollbar.css">
<script src="js/jquery-1.7.1.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/alldata.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper',
{
scrollbarClass: 'myScrollbar',
hideScrollbar:false,
/*onBeforeScrollStart: function (e) { return false; }*/
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<script>
function initList(){
for(var i=0; i<allData.length; i++){
var line = "<li style='color:#"+ allData[i].Color + ";'>" + allData[i].EventName + "</li>"
$("#thelist").append(line);
}
}
$(document).ready(function(){
initList();
initList();
initList();
initList();
//alert("Finished!");
});
</script>
</head>
<body>
<div id="header">iScroll</div>
<div id="wrapper">
<div id="scroller">
<ul id="thelist">
</ul>
</div>
</div>
<div id="footer"></div>
</body>
</html>
Note: the variable allData is a JSON array with 500 objects.
EDITED:
It works fine on Motorola Atrix (2.3.3) and on Galaxy 3,
But it doesn't move on Galaxy 2 (4.2.2) and Galaxy3 after 1000 list items, strange Motorola Atrix is has lower Android version and it's web-toolkit is slower
Is there any way to resolve that problem?
After the data is loaded you just need to refresh the list.
function initList(){
for(var i=0; i<allData.length; i++){
var line = "<li style='color:#"+ allData[i].Color + ";'>" + allData[i].EventName + "</li>"
$("#thelist").append(line);
}
myScroll.refresh();
}