Click here to Skip to main content
12,621,744 members (36,797 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: Javascript CSS HTML
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:
#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:
<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:
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 3-Jan-13 8:16am
davemas333
Comments
   
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
   
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
   
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
davemas 3-Jan-13 16:38pm
   
hehehehe I'm sorry my friend ..... ok now do you understand my idea??
if you can help me to make it ... please tell me

or if you can help me to play file in swf player !!!
   
It was "without SWF", and not, it turns out, it means "with SWF". Not sure, never did it, but...
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

You may just need to add a target attribute to your anchor tags.
Target Attribute[^]
  Permalink  
Comments
davemas 3-Jan-13 16:23pm
   
target="audio"
I put this in the link but still open new window
Marcus Kramer 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??
Marcus Kramer 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.
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 2

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
  Permalink  
Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 3

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
  Permalink  

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web01 | 2.8.161128.1 | Last Updated 3 Jan 2013
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100