View original (French)

How to add multiple audio players on a page?

Solved
txiki Posted messages 6514 Registration date   Status Contributor Last intervention   -  
txiki Posted messages 6514 Registration date   Status Contributor Last intervention   -
Hello everyone,
When I built this page, it was to stream via Real Player. The files were in ra format with a text file indicating the location of the music file, and it would start automatically in a Real Player. Old technology, I admit.
List of Basque music
Today I have a script in html5 HTML 5 Audio tag (see DEMO just below the script).

My question is:
How can I display the player with its control bar, which would be hidden at first, either on this same page or another one by clicking on one of the links in the list?
Any solution would be welcome!

I'm not quite sure how to do it.
I need to do the same thing with Basque songs as well.

Thank you very much in advance!

Configuration: Windows / Firefox 98.0.2
--
Happiness is the only thing that can be given without having it.

6 answers

  1.
    txiki Posted messages 6514 Registration date   Status Contributor Last intervention   610
     
    Hello everyone,
    Here is the page containing the player still visible for now but without the div tag.
    Then the other one in a 
    <div id="Layer1"
    but not yet published.
    Can you spot the error???
    Another strange thing, the list is in bold except for the music link, which is the player.
    I would have liked to include all the players but hidden, to display only by clicking on a link.
    Is that possible?
    Note: the script is in a layer (div in Dreamweaver).
    Thanks again!
    0
  2. DesReliques
     
    Hello,

    The best way—there aren't really any other alternatives—is to go through programming to modify the HTML with JavaScript or to find a ready-to-use audio player script.

    Why not have a single player that changes the files to play? It seems more logical to me than having to load multiple files + audio APIs that won't be used at the same time, or else, hello chaos...

    It could look something like this: 

     var audio = document.createElement('audio'),//-- create the AUDIO element(in the DOM but not yet included in the page) playlist = document.createElement('select'),//-- create a select tracks =[];//-- an array that will hold the names of the tracks according to the format(mp3 and ogg) function ajoutPlaylist(mp3,ogg=null){//-- a function that fills the tracks array by adding each time an object that has two attributes/values: mp3: the URL of the mp3 file and ogg the URL of the ogg file tracks.push( {mp3:mp3, ogg:ogg} ) //-- a literal notation object(or JSON) in curly braces } function loadAudio(listMp3, listOgg){//-- the parameters are two arrays of the same size(.length) for(var i=0, len=listMp3.length; i<len; i++){ let pisteM=listMp3[i] !==null ? listMp3[i] :null;//-- ternary comparison equivalent to "if" else" but on one line with fewer words//pisteM is list[i].ogg or null let pisteO=listOgg[i] !==null ? listOgg[i] :null; ajoutPlaylist(pisteM, pisteO) let opt=document.createElement('option') if( tracks[tracks.length-1].mp3 !==null ){//-- tracks.length indicates the length(number of elements) of the array, - because it starts at zero opt.innerHTML=tracks[tracks.length-1].mp3.substring(0, tracks[tracks.length-1].mp3.lastIndexOf('.') )//--cuts the string to keep only what is before the last '.' of the filename opt.setAttribute('value', i )//-- the value attribute contains the index of the tracks array of the track }else{ opt.innerHTML=tracks[tracks.length-1].ogg.substring(0, tracks[length-1].ogg.lastIndexOf('.') ) opt.setAttribute('value', tracks[tracks.length-1] ) } playlist.appendChild(opt) console.log(opt) } } function choixPiste(index){ var isMp3 = tracks[index].mp3 !==null ? '<source src='+tracks[index].mp3+' type="audio/mpeg" >':''; //-- still the ternary notation of IF ELSE which is very practical once you're used to it var isOgg = tracks[index].ogg !==null ? '<source src='+tracks[index].ogg+' type="audio/ogg" >':''; //-- still the ternary notation of IF ELSE which is very practical once you're used to it audio.innerHTML=isMp3+''+isOgg } audio.id='lecteur' audio.controls=true;//-- activates the controls, equivalent in HTML to <audio controls > playlist.id='playlist' document.body.appendChild(audio)//-- adds the audio element to the page document.body.appendChild(playlist)//-- adds the select element to the page loadAudio(['chanson0.mp3', 'chanson1.mp3' , 'chanson3.mp3'],['chanson0.ogg', 'chanson1.ogg' , 'chanson2.ogg'] ) playlist.addEventListener('change',function(e){ console.log('option changed: '+e.target.innerHTML) choixPiste(e.target.value) })


    Of course, it can be better organized in terms of functions(to avoid repetitions) and improved according to needs. This is just a quick base to give an idea(and forget Dreamweaver: writing HTML is text, writing CSS is too, writing JavaScript is thinking before writing text... so you only need the editor mode of Dream which is simply writing text(and get rid of all the other things added by Dreamweaver to do it by hand and keep it readable by a human... which is not the case of 'code' generated automatically).

    The same goes for the controls/appearance; we can style this with CSS, add audio.play() to play the selected file directly, etc...
    A few other examples:
    https://www.w3schools.com/jsref/dom_obj_audio.asp

    p.s: I have not tested with real music, but there is no reason for it not to work. It's quite simple: a list of the addresses of the files is used to fill a dropdown menu. When the menu changes, it writes in the player the mp3 track and its ogg alternative version; then you just have to hit play.
    0
    1. DesReliques
       
      to test between script tags or in an external ".js" file loaded in the HTML.

      For the first case, add the above script afterwards and close the <script>, <body>, and <html> tags in that order. 

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script>
      0
  3. txiki Posted messages 6514 Registration date   Status Contributor Last intervention   610
     
    Hello DesReliques,
    Sorry for the delay but I have a lot of issues on my site that I hadn't noticed, as I wasn't looking at this part, sections of the abarka site.
    I've therefore used a script from the Basque Quizz that I am testing.
    I have some CSS and JS.
    The script below (which I'm not too familiar with) contains lines that follow in the page (.js + .htm) and relates to the aforementioned quizz, which works very well: 
    <!-- Start of the frame box for the audio player in the pop up --> <script language="JavaScript" type="text/JavaScript"> //<![CDATA[ <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> //]]> </script> <script type="text/javascript"> //<![CDATA[ <!-- Rad Zone script to display images via a link var subs_array = new Array("sub1","sub2","sub3","sub4","sub5","sub6","sub7","sub8","sub9","sub10","sub11","sub12"); function displaySubs(the_sub){ if (document.getElementById(the_sub).style.display==""){ document.getElementById(the_sub).style.display = "none";return } for (i=0;i<subs_array.length;i++){ var my_sub = document.getElementById(subs_array[i]); my_sub.style.display = "none"; } document.getElementById(the_sub).style.display = ""; } // End --> //]]> </script>

    <div id="pop" style="border: 3px outset ; position: absolute; left: 1000px; top: 1000px; display: none; z-index: 200; background-color: rgb(0, 0, 0 );"> <div id="tet" onmousedown="dx=px-gdim.offsetLeft;dy=py-gdim.offsetTop;drag=1;" onmouseup="drag=0" style="padding: 0pt 20px 0pt 0.5em; cursor: move; background-color: rgb(0, 0, 0); line-height: 18px; color: white; font-size: 12px; font-family: Helvetica,Arial;">header <img title=" Close " src="../Fiches_pottok/fermer.gif" onclick="voirSelect('visible');gdim.style.display='none'" style="margin: 1px; cursor: default; position: absolute; right: 0pt; top: 0pt;" height="8" width="16" /> </div> <img style="border: 0pt none ; margin: 1px;" /> </div> <h4 align="center"> Ator Ator</h4> <table border="0" cellspacing="0" align="center" width="60%"> <tr> <td> <audio controls> <source src="/Downloads/Musiques/Chants/Ator_Ator.mp3" type="audio/mpeg"> <source src="/Downloads/Musiques/Chants/Ator_Ator.wma" type="audio/wma"> Your browser does not support the audio tag. </audio> </td> </tr> </table>

    Thank you very much for your examples which I will keep carefully!

    0
  4. txiki Posted messages 6514 Registration date   Status Contributor Last intervention   610
     
    Hello everyone,
    Well, I've just updated and corrected the CSS for the page width (90% instead of 880px) because of the banner image and the menu width.
    I'm trying to center the <form> elements but it's not easy.

    By the way, to the one who told me not to use Dreamweaver, I correct the generated codes myself (2 screens, one for creating the page and the second for displaying the code, which allows me to see the code as I go, hence the correction possible from the start).
    Thanks again.

    --
    Happiness is the only thing that you can give without having it.
    0
    1. DesReliques
       
      Uh, another question then....
      For CSS, there are several ways to do positioning.
      For centering, we can use margins and dimensions: 2 margins on the right and left, and the remaining space = centered horizontally (for example, 10% on the left, 80% element size = centered)

      But well, that's another topic, you were talking about AUDIO players, right?
      One question at a time.
      Is it clear, do you understand the point of having a single player that changes the file vs. a file to load for each song to play?
      Tested my code, without using Dreamweaver and especially understanding it to add playback by clicking on the select list?

      "To the one who told me not to use Dreamweaver, I correct the generated codes myself (2 screens, one to create the page and the second for code display which allows me to see the code as I go, allowing for correction from the start)."

      Not very well understood....are you talking about my script?
      It seems to me that rather than having to correct code with 'errors', it is faster and better to write good code directly.
      2 screens have nothing to do with it, the idea is to know what you are doing and be able to do it.
      Working in WYSIWYG prevents you from doing this because it does not encourage reflection or even separating appearance from data.

      Let's be serious for a moment. You ask a question about a multimedia player for audio. I showed you an element of response in a didactic way... and you talk to me about centering an element in CSS.
      The only answer is to learn to write CSS (and not ask a program to do it automatically which won't work = so to throw away tools like Dreamweaver if it's to work visually on writing texts/scripts, it’s simply a very bad tool with an approach that is not coherent with the reality of languages/a web page) but that is not the answer to using the audio API with JavaScript.
      0
      1. DesReliques > DesReliques
         
        For me, the three questions have a similar answer:
        how to center: by learning CSS
        how to manage my Audio API: by learning JavaScript
        how to learn to make a quiz: JavaScript.

        As long as you do not understand that what Dreamweaver does is the opposite of what should be done and does not allow you to learn (and therefore drop their pre-generated scripts and the WYSIWYG approach which is anyway not good = bad website as a result) to start rolling up your sleeves:
        learn to write for yourself instead of making a software think for you which will do it very poorly and does not even know what you want, can imagine or create.

        To learn, you have to start with the basics: HTML, CSS, JavaScript in that order, CSS builds on HTML and JavaScript allows you to manipulate HTML and CSS.

        If for the first ones these are fairly simple descriptive languages (20 minutes each of reading to understand), JavaScript is programming.
        With a logical (yes/no, true/false) and sequential (+object+event-driven) approach to solve a question and automate processes (algorithm).... in short, not something that can be improvised instead of a human by a program but that must be thought out, constructed, and has coherence (which guarantees that it works and for the intended purpose).

        Since it's long to write, I preferred to give you an example to test yourself that will help you acquire some of these basics or force you to look for ways to understand them...
        But have you tried and reproduced my answer as I proposed from the beginning?
        Whether you like the answer or not, it's the best you'll get: to know, you have to start learning.
        By dissecting my code (and understanding it), you will have all the answers to your question on how to use audio... of course with bases that we are not here to provide you: "learn beginner JavaScript" for example in a Google search.

        For positioning, it is done in CSS, so learn CSS and practice the positioning methods (which are diverse).

        To make a quiz, you will probably need to use programming, if only to test if an answer is true or false. So probably a part of JavaScript that will manipulate the questionnaires on the page (form and inputs) and handle the questions; thus HTML, CSS, and JavaScript together.

        Instead of just noting this: 
        <!-- Rad Zone script to display images via a link

        It would be better to understand what it does and why the script does it like that. So you can redo it or reuse it in another context.
        Without knowledge and understanding you cannot achieve anything. DW prevents you from doing so and has not been a valid tool for about fifteen years, and it never was for creating RIA-type sites or any modern site that would have ambitions beyond one week.


        Where are you? How much time have you spent learning each of the languages?
        There are many online courses and tutorials on these subjects that will help you understand my example where you’re stuck. But yes, you will have to roll up your sleeves instead of staying with DW to produce low-quality sites from a visual layout.
        0
  6. txiki Posted messages 6514 Registration date   Status Contributor Last intervention   610
     
    Hello DesReliques,
    It's true I mix a lot of things up.
    "But that's another topic, you were talking about the AUDIO player, right?" Yes, I managed to get it to work, but the player appears at the bottom of the list, hence my initial question.
    Didn't quite understand....you are indeed talking about my script? : No, haven't tested it yet. My site is very old and hasn't been touched in a few years but was working perfectly fine except for the sections with animations in .swf (which I just deleted, I didn't know they were obsolete). I have been very sick.
    However, I did manage to convert the videos. I used to do streaming in an era when it didn't exist with files hosted by an ISP except mine, including music and songs (with Real Player).

    I write the CSS myself, not Dreamweaver, which I only use for syntax highlighting and indentation. It helps to see any potential errors.

    Same for the Rad Zone script, which I completely re-adapted, but I'm not capable of writing JavaScript, only modifying certain things.

    Thank you very much anyway!
    As for your script, of course I'm going to test it. For now, I'm trying to fix and reorganize my site.

    --
    Happiness is the only thing you can give without having it.
    0
  7. txiki Posted messages 6514 Registration date   Status Contributor Last intervention   610
     
    DesReliques,
    I didn't expect a novel.
    I am closing the discussion.
    Thanks anyway!

    --
    Happiness is the only thing that can be given without having it.
    0