How To Change Script Src In Jquery

I have an audio chemical element with a playlist. When I click on one of the songs it takes the filename and displays it in a div with the id of nowplaying. EG.

$("#nowplaying").html("<p>" + $("#myaudio").attr("src").split("\/").popular().trim() + "</p>");

This is working fine.

At present I am trying to load in a text file of the lyrics for each song. I have this script that loads a text file into the html in a pre element:

var ten;
{ x = new XMLHttpRequest(); }
office getdata() {
    x.open("go", "06 - All The People.txt", true);
    x.onreadystatechange= showdata;
    x.send(cypher);
}

function showdata() {
    if(x.readyState==iv) {
      var el = certificate.getElementById('pre');
      el.innerHTML = x.responseText;
    }
}

getdata();showdata();

This role also works fine, but when I click on a file I need to change the source in the script EG.

x.open up("get", "06 - All The People.txt", true);

So I need to alter the 06 - All The People.txt function each fourth dimension a vocal is clicked.
I tin go the path to alter and display in a div on the page with:

$("#filesrc").text("" + $("#nowplaying p").text().replace(".mp3", ".txt") + "");

This will take the file name from nowplaying and alter the file extension from mp3 to txt, I tin't work out how to use information technology to change the source file in the script above when a new song is clicked.

Whatsoever aid would be very appreciated.

Replies(xi)

You can't reuse a XMLHttpRequest.

And you lot don't need to cal showdata. information technology is chosen as byx.onreadystatechange.

function getdata(textFileName) {

var x = new XMLHttpRequest();

x.open("become", textFileName, true);

x.onreadystatechange = showdata;

x.send();

}

function showdata() {

var x = this;

if(ten.readyState == 4) {

$('#pre').html(x.responseText);

}

getdata("06 - All The People.txt");// call information technology as many times as y'all like!

PS it would exist much less code if you used $.get.

PPS information technology would be one line if you used $.post.

$('#pre').load( "06 - All The People.txt");

Sorry forgot to mention this is for an offline (no server) personal projection. As far I could see $.get requires a server. I will look into it further though. Thanks for the link.

Possibly I didn't explicate myself porperly.

I accept a bunch of mp3 files in an ol.

When I click on whatever of the songs it takes the filename for the songs and displays it in my nowplaying div.
I'thousand trying to copy that aforementioned file name to the go asking with the extension txt instead of mp3. All the lyric files have the same filename equally the mp3.

I need information technology to modify the get request path everytime a new song is clicked on.

And so if I click on 06 - All The People.mp3
I need to alter the go asking to:
x.open up("get", "06 - All The People.txt", true);

If I click 07 - Nothing In The Universe.mp3
I need to change the asking to
10.open("become", "07 - Zippo In The Universe.txt", truthful);

Changing the get request is the part I'chiliad having trouble with.

And then on for all the files in the list. I hope this makes sense.

If y'all tin applyXMLHttpRequest, you can utilize $,get or $.postal service. Yous are already using jQuery!

You tin't reuse a XMLHttpRequest.

If you share the important role of your HTML, I tin can show yous how to play the music and bear witness the text file.

This the important part of the li'due south for the songs:

<ol class="songs" id="songs">
<li><a href="#" data-src="file:///c:/Audio/Albums/1927/1988 - Ish/01 - To Dearest Me.mp3" </li>
<li><a href="#" data-src="file:///c:/Sound/Albums/1927/1988 - Ish/02 - That's When I Think Of Y'all.mp3"</li>
</ol>

And so on

This is the div to display the lyrics in

<div id="content"><pre id="pre"></pre></div>

Is all that you need?

This should work…

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-viii" />
<title>Music</title>
<meta http-equiv="X-UA-Compatible" content="IE=border" />
<script src="https://lawmaking.jquery.com/jquery-3.three.one.min.js"></script>
<script>
$(function(){
var audio = new Sound()
$("#songs a").click(role(){
var src=$(this).data("src")
audio.src = src
sound.play()
$("#pre").load(src.replace(/mp3$/,"txt"))
return false
})
})
</script>
</head>
<torso>
<ol class="songs" id="songs">
<li><a href="#" data-src="file:///c:/Audio/Albums/1927/1988 - Ish/01 - To Beloved Me.mp3"> To Love Me</a></li>
<li><a href="#" data-src="file:///c:/Audio/Albums/1927/1988 - Ish/02 - That's When I Think Of You.mp3">That's When I Think Of You</a></li>
</ol>
<div id="content"><pre id="pre"></pre></div>
</torso>
</html>

There are a million ways to play audio files. I picked the briefest.

JΛ̊KE

Even when you are running without a server, you lot would rarely specify a full URL to the files. You may have to use relative file names.

JΛ̊KE

Thank you very much Jake, I'thousand having problems. The lyrics still don't show up. Must be something on my end, I'll look into information technology. Once again thank you very much.

Open up your dev tools. Run into if you have an error bulletin. Some browsers have funky rules nigh local file Ajax. I switched to short names for the files in http://dwelling.jejaju.com/player/some-files/ <--

Manifestly information technology is online, simply it works without a server for me as well.

JΛ̊KE

I got it working, I was missing a semicolon in one of my other scripts. Thank yous very much for your time, it's greatly appreciated. Btw love the python