Results 1 to 6 of 6
  1. #1
    Join Date
    Aug 2006
    Location
    North Carolina
    Posts
    279
    Plugin Contributions
    0

    Default What is the proper way to add a field reference into HTML5 audio player source code?

    Hi guys,

    I'm replacing my java jplayer mp3 audio player with an html5 audio reference for each song/product.

    Here is the code I want to add to the product info page with a manually pasted source reference example:

    <audio controls preload="metadata" style=" width:250px; align:center;">
    <source src="mp3previews/0013124.mp3" type="audio/mpeg">
    Your browser does not support the audio element.
    </audio>

    I need to change 'source src' to reference products description/products_description5 directly so it will play a different sample for each song. I already have those listed in my database.

    What would I paste into the source src instead?

    Also...align:center; is not working in the first line - what would be the replacement?
    The player is positioning left

    thank you,
    Jeff Michaels,
    pres of Musical Creations Ltd.

  2. #2
    Join Date
    Jan 2004
    Posts
    66,363
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: What is the proper way to add a field reference into HTML5 audio player source co

    Quote Originally Posted by jeffmic View Post
    Also...align:center; is not working in the first line - what would be the replacement?
    The player is positioning left
    Probably text-align instead of align
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  3. #3
    Join Date
    Jan 2004
    Posts
    66,363
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: What is the proper way to add a field reference into HTML5 audio player source co

    Your previous player had to output the filename somehow.
    How did it do that? (It likely used a php "echo" statement in some media or src or file attribute for the javascript player)

    Basically do the same for your src= in the new syntax.
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

  4. #4
    Join Date
    Aug 2006
    Location
    North Carolina
    Posts
    279
    Plugin Contributions
    0

    Default Re: What is the proper way to add a field reference into HTML5 audio player source co

    All I found from my old code was code in the functions/extra_functions to assign the audio sample.
    no php "echo" statement. Is this something I could still use?
    PHP Code:
     function mp3_sample($prid) {
       global 
    $db;
       
    $firstdigit substr($prid0,1);
       if ( (
    $firstdigit == 3) || ($firstdigit == 4) ) {
          return 
    '';
       }
       
    $sample_query "select products_description5
                       from products_description
                       where products_id = '" 
    . (int)$prid"'";

        
    $sample $db->Execute($sample_query);

        if (
    $sample->RecordCount()) {
          if (
    trim($sample->fields['products_description5']) == '') return '';
          
    $string $sample->fields['products_description5']; 
    Jeff Michaels,
    pres of Musical Creations Ltd.

  5. #5
    Join Date
    Aug 2006
    Location
    North Carolina
    Posts
    279
    Plugin Contributions
    0

    Default Re: What is the proper way to add a field reference into HTML5 audio player source co

    I also have this code in the template to call up the jplayer.
    This has the php echo, but how do you add it to the html5 code properly

    (old code)
    PHP Code:
    <!--bof Product description5 -->
    <?php if ($products_description5 != '') { ?>
    <div id="productDescription5" class="productGeneral alert6">
    <?php echo build_mp3_icon($products_description5); ?>
    </div>
    <?php ?>
    <!-- eof Product description5 -->

    (new html5 player with sample)
    HTML Code:
    <audio controls preload="metadata" style=" width:250px;">
        <source src="mp3previews/.../0013124.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>


    I tried this, but it did not work :-(
    HTML Code:
     <audio controls preload="metadata" style=" width:250px;">
        <source src=><?php if ($products_description5 != '') {
        echo ($products_description5); } ?> <type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    Jeff Michaels,
    pres of Musical Creations Ltd.

  6. #6
    Join Date
    Jan 2004
    Posts
    66,363
    Blog Entries
    7
    Plugin Contributions
    274

    Default Re: What is the proper way to add a field reference into HTML5 audio player source co

    Something's "off" here.

    Two posts back you posted code for a function named mp3_sample, which takes $prid as a parameter (which is usually a product number integer, or a product attribute hash string). The code you posted wasn't complete, so it's not clear what it returns when successful.
    But it does look at the products_description5 value in the database. I would expect it probably returns that (a string).

    But then your next post refers to a function build_mp3_icon() which receives $products_description as a parameter, and since it's echoing out the function's response it would seem that that "build_mp3_icon()" function doesn't build an "icon" but rather builds a whole player. I suppose if $products_description is a string returned from either querying the db or calling mp3_sample(), then maybe skipping build_mp3_icon and replacing it with the html5 audio tag is enough?

    So, in the absence of complete code, I'm guessing:

    PHP Code:
    // this might already be set previously, so commenting out for now; uncomment if needed, and replace $prid with whatever variable is appropriate
    // $products_description5 = mp3_sample($prid);

    <?php if (!empty($products_description5)) { ?>
    <audio controls preload="metadata" style="width:250px;">
        <source src="<?php echo $products_description5?>" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <? } ?>
    .

    Zen Cart - putting the dream of business ownership within reach of anyone!
    Donate to: DrByte directly or to the Zen Cart team as a whole

    Remember: Any code suggestions you see here are merely suggestions. You assume full responsibility for your use of any such suggestions, including any impact ANY alterations you make to your site may have on your PCI compliance.
    Furthermore, any advice you see here about PCI matters is merely an opinion, and should not be relied upon as "official". Official PCI information should be obtained from the PCI Security Council directly or from one of their authorized Assessors.

 

 

Similar Threads

  1. Adding JS Html5 Audio Player to Description
    By chriscana in forum General Questions
    Replies: 17
    Last Post: 15 Jun 2016, 02:11 PM
  2. v151 HTML5 Native Audio players?
    By Yolanda in forum General Questions
    Replies: 4
    Last Post: 12 Dec 2012, 08:37 PM
  3. What is the correct way to reference language file?
    By venablc in forum Templates, Stylesheets, Page Layout
    Replies: 3
    Last Post: 7 Jul 2012, 02:29 PM
  4. Proper Code for Image the Zen Cart Way
    By DLLong in forum General Questions
    Replies: 2
    Last Post: 30 Jan 2009, 09:26 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR