Click here to Skip to main content
15,885,998 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi everyone

I have this example...it's an audio player list but I have a little problem ... it opens the file in new windows how to make it in the same window??????


CSS File:
CSS
#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
li a{color:#eeeedd;background:#333;padding:5px;display:block;}
li a:hover{text-decoration:none;}



HTML File:
HTML
<audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
    <source type="audio/mp3" src="http://www.archive.org/download/bolero_69/Bolero.mp3">
    Sorry, your browser does not support HTML5 audio.
</audio>
<ul id="playlist">
    <li class="active"><a href="http://www.archive.org/download/bolero_69/Bolero.mp3">Ravel Bolero</a></li>
    <li><a href="http://www.archive.org/download/MoonlightSonata_755/Beethoven-MoonlightSonata.mp3">Moonlight Sonata - Beethoven</a></li>
    <li><a href="http://www.archive.org/download/CanonInD_261/CanoninD.mp3">Canon in D Pachabel</a></li>
    <li><a href="http://www.archive.org/download/PatrikbkarlChamberSymph/PatrikbkarlChamberSymph_vbr_mp3.zip">patrikbkarl chamber symph</a></li>

</ul>



JavaScript File:
JavaScript
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];    
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}​
Posted
Comments
Sergey Alexandrovich Kryukov 3-Jan-13 13:26pm    
Why do you think audio element is related to SWF?
—SA
davemas 3-Jan-13 16:14pm    
because I saw many sites have a player as SWF file and that's why I said that
but I have this example and I need to play the file without open new window
Sergey Alexandrovich Kryukov 3-Jan-13 16:20pm    
No, no, SWF files are played in different ways, for example, using the HTML element "object". This is a completely different approach; please don't mix them up.
—SA
davemas 3-Jan-13 16:27pm    
I'm not using SWF in this example I don't want to use it but my project is:

I have my music and I made offline website only for me .... and I have every song as a link and I want to make a player in the same window or another way:
I have a SWF player but I don't know how to make every link play a song in this player
Sergey Alexandrovich Kryukov 3-Jan-13 16:35pm    
OK, your question was not about SWF. You asked about something about "without SWF"... And then I answered...
"I don't know" is not a question...
—SA

You may just need to add a target attribute to your anchor tags.
Target Attribute[^]
 
Share this answer
 
Comments
davemas 3-Jan-13 16:23pm    
target="audio"
I put this in the link but still open new window
fjdiewornncalwe 3-Jan-13 16:25pm    
target="audio" isn't a valid option.
The only valid options are
1) _blank Opens the linked document in a new window or tab
2) _self Opens the linked document in the same frame as it was clicked (this is default)
3) _parent Opens the linked document in the parent frame
4) _top Opens the linked document in the full body of the window
5) framename Opens the linked document in a named frame
davemas 3-Jan-13 16:34pm    
and how it will be??
fjdiewornncalwe 3-Jan-13 17:00pm    
Just read the options. They are pretty much self-explanatory.
In this case use the target="_self" option to open the link into the current window.
Please see my comment to the question: I cannot see how your question is related to SWF. You are trying to work with HTML5 audio element. Please see:
http://en.wikipedia.org/wiki/HTML5_Audio[^],
http://www.w3schools.com/tags/default.asp[^],
http://www.w3schools.com/html/html5_audio.asp[^].

This element is rather associated with Ogg Vorbis audio. The problem of acceptable or supported audio format is somewhat controversial these days. For further detail, please see:
http://en.wikipedia.org/wiki/HTML5_Audio#Competition[^],
http://en.wikipedia.org/wiki/Use_of_Ogg_formats_in_HTML5[^].

For comparison, please see also my recent CodeProject Q&A post of audio formats: HTML5 and Mime, Streaming a video?[^].

Also, see the post reference above and pay attention for my recommendations to use ffMpeg or libavcodec utilities for media conversion. There are widely universal. It's very likely that they will help you to re-master your audio record to present them properly in your Web applications.

—SA
 
Share this answer
 
OK, now it's weird. After the discussion in comments on something related to "without SWF File" it turns out to be rather "how to play SWF file in ASP.NET application". And how was I supposed to understand it.

OK, here is one short but descriptive CodeProject article on the topic:
How To Play SWF File In Asp.Net[^].

As I mentioned before, this is completely different technique. Look at the code sample: it's based on the HTML element <object>.

If you need, you will find a lot more:
http://www.codeproject.com/search.aspx?q=SWF+%22ASP.NET%22&doctypeid=1[^],
http://bit.ly/XnV6hq[^].

—SA
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900