I have 3 files.
First one is audios, including some audios, audios.\
Second one is index.html, nothing here, shown as below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
The last one is player folder, it's a music player app,
music player
What I want to do is that, first I open index.html, (index.html should have some links), for example, when I click one link, it should direct to player.html and start to play the corresponding music.
What confused me is that, how player.html know which music it should play?
I initiallly used
20230119
It did start to play 20230119.mp3, but it's the default music player, not the one I built.
One idea is that maybe index.html should send some messages (ex.the song's name) to player.html, but what skills I should learn and use?
I used
but this won't give me the result I want.
Well a solution would be something like this.
You'll need to create a link pointing to the player.html with a parameter in the url to specify the name of the file.
something
Then in your player.html file, you'll need to retreive the name attribute in the url with JS.
In your head section, you can insert this script :
<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const name = urlParams.get('name');
</script>
Then with the name retreived from the URL, you can use an HTMLAudioElement to launch the audio file.
Something like this :
const audioElement = new Audio(`audios/${name}.mp3`);
audioElement.play();
Have a lovely day,
Sources :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
The index.html and player.html pages are typically served by a web server, and can communicate with each other using various techniques. One common way to send messages from index.html to player.html is by using a web socket connection.
A web socket connection allows real-time, bidirectional communication between the web server and the client's web browser. The server can send messages to the client using the web socket, and the client can respond with messages of its own.
To set up a web socket connection, you would typically use a JavaScript library such as Socket.IO, which provides a simple API for sending and receiving messages over web sockets. Once the connection is established, you can send messages between the index.html and player.html pages by using the API provided by the library.
Related
I Want to generate a link for my local woff file. With help of createobjectURL function, A link is created, however, the penalty is in the way of a blob. The URL lifetime is tied to the document in the window on which it was created. The URL runs only on my browser, and when I close relevant tab, the file disappears. So, I'm trying to find a way using js function which creates a perm link to uploaded local file. Currently I used .
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>URL.createObjectURL example</title>
</head>
<body>
<input type="file">
<file>
<p class="p">The URL of file is : </p>
</body>
<script>
var Element = document.querySelector('input');
var file = document.querySelector('file');
Element.addEventListener('change', function() {
var url = URL.createObjectURL(Element.files[0]);
file.src = url;
console.log(url);
var d=document.querySelector(".p");
d.textContent+=url;
});
</script>
</html>
It creates blob:https://www.example.com/123 however I require https://www.example.com/123. I also tried Base 64 encoding. It works but the file size, and speed becomes a drawback even when it is compressed.
You're asking for one thing but giving an example of another here.
I Want to generate a permanent link for my local woff file.
You can't generate a URL to file://etc/etc since:
Browsers don't expose information about the user's file system to JS
If you could get a URL like that, then the browser wouldn't let the webpage link to it.
Access to local files is heavily restricted.
I require https://www.example.com/123
If you want the file to be available on your website: actually upload it to the website! Right now, the file only exists on the user's disk and in the memory being accessed by their browser.
You have to send the data to a server (e.g. with an Ajax POST request) where you have a webservice which reads the request, extracts the file from it, stores the file somewhere, gives it a URL, and then sends the URL back to the browser.
I've been delving into the emerging PUSH API and manage to register the service-worker as expected. In broad lines I follow the Mozilla recipes for this.
Generally speaking, you will create two javascript files; one for the service worker that you want to register, and one to perform the actual registration - lets call this index.js-, which in my case includes a registerWorker() function. I include an html file (say push.html) that calls this function on-load, so that browser that calls this html file will register the service worker. So far this all works fine in the development environment.
The problems start when I want to port this to my server. If I port the service-worker and the index.js to my server (e.g an Apache 2 server), I suddenly get a message telling me that the serviceworker is not in the navigator. I've been trying different strategies, but so far without succes.
My question therefore is; what is the best way to put the required javascript files on the server in order to achieve the above?
Edit:
I'll add the push.html file below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Simple Push Notification - ServiceWorker Cookbook</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="registerServiceWorker(12)">
<script src="./js/index.js"></script>
</body>
</html>
As far as I can see, the only difference is that I call this file from localhost in the dev environment, and http://{myserver}:{myport}// from the server. I would not expect any different behaviour unless maybe it has something to do with SSL requirements or CORS filters...
Edit 2:
ok..I found the most probable cause, based on this post:
Can't find serviceWorker in navigator anymore
When putting the code on the server, https support is required!
I'm following this tutorial, I was confused at the point where it says:
"...
Surprisingly the code is very simple:"
// Connect to the socket.io server
var socket = io.connect('http://localhost:8080');
// Wait for data from the server
socket.on('output', function (data) {
...
I'm not sure where to put this code. I tried to add it to browser JS, like this:
<html>
<head>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.5/socket.io.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script> <!-- here -->
// Connect to the socket.io server
var socket = io.connect('http://localhost:8080');
// ...
</script>
</head>
<body>
<h1>SSH</h1>
<div class="terminal"></div>
</body>
</html>
And it worked! Is this correct? I thought it was meant to be a server-side code.
Anyways, now I get a terminal which i can interact with. But I'm not sure what it is doing. I was trying to implement an SSH client, but it looks like I obtained an on-browser terminal, over which I will manually connect to SSH?
Also I believe this would only work on the local machine. But what I want is a -remote- web server that can access to my machine using SSH (although it may not be very safe). Am I in the right direction? How can I implement a web server that acts as a client to the SSH server on my machine?
Thanks,
It has absolutely NOTHING to do with SSH in any way, shape or form.
It's a websocket server/client, which allows you to send messages(not commands) between a browser and a server.
It's most commonly used for chat applications, although there are endless other uses.
However, with this mechanism in place, you could interpret certain messages on the server and make them execute the commands you wish to allow your users to use.
Quick example of how it would work (server side) :
socket.on('ls',(path,cb)=>{
fs.readdir(path, (err, files) => {
cb(files);
});
});
and on the client :
socket.emit('ls','/home',(files)=>{
console.log(files);
};
The client here emits a 'ls' event, with a path (user selected or something); and the server interprets this message, get the list of files for the given path, and returns it to the client. This mechanism could be used to implement a variety of commands. But keep in mind that this is NOT SSH.
Read more on Socket.io
If you are following the tutorial the server side code is server.js. This is a simple express.js webserver with a socket.io extension.
The code in the .html file is send to the browser which acts as client.
That's a socket server. It listens for connections from the browser. That's what you're doing in the HTML.
AM trying to implement a push server for my pHP application.
My initial thoughts were as long as i keep the EVENTS called on my client let say message_view.php file . I would not have a problem of emiting node js events.
But i see that most of the tutorial online use something like I dont understood this ?
fs.readFile(__dirname + '/client.html') ...//html files
or
response.sendfile('hello world')
After they have started the server. Then they add event and logic as follow on the client html file that am supposed to do it on my messages_view.php file.
<script src="socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
and socket emiting events like this one :
<script>
// create a new websocket
var socket = io.connect('http://localhost:8000/?profile_id=abcde2');
//..I want to code here to update my divs.
</script>
What do i need exactly to emit this message on my PHP file. Many Thanks!
If you want to serve html with php, and have a node.js socket server, the socket server doesn't need to serve html, so you can omit the majority of the example you're using. Just include the script in your .php that serves the html page and make sure the url to the script properly targets the socket server.
My question is really simpel, but I haven't found it yet.
I have a python script running on my server. This script reads NFC cards. (pyscard)
Everytime when there is a card the cardID must send to a webpage. I have in index.html file on my localhost.
<head>
<title>Hello!</title>
</head>
<script language="JavaScript" type="text/javascript">
function card(Cardid){
alert(Cardid);
}
</script>
<body>
</body>
</html>
There is a way to do it by selenium (driver.execute_script(command) ) Selenium is to heavy. Is there a other simple and light way to do this?
If I got you right, you need to implement AJAX. Here is simpliest example How to implement a minimal server for AJAX in Python?
If you'll need something more complex — chose one of the python web frameworks (Flask or Django) and look for tutorials how to implement AJAX with them.
If you want to push cardId to webpage you need tot use something in between like socket.IO then on a listening channel pushing the data to all websocket clients. From there you can pass it to a function like yours.
The other way to do it is a bit more limiting.
You can make Ajax call to python which reads current card holding data and use that id. But when another card is on the reader,you then have tot refresh to see the new cards data.