JS code works on new post but doesn’t when updating

  • Resolved openbayou

    (@openbayou)


    6 years, 8 months ago

    Hello,

    I’m having a problem with my JS code. It works when I’m adding a new post but when I save it and insert a new post, it doesn’t.

    What my JS code does is when I insert a file, it reads the file size and time length. On a new file, when it loads an MP3 file, it will output the file size and time length.

    Example: when adding tms_1527.mp3, it outputs
    File Size: 118598822
    Song Duration: 02:03:24

    If I add new file on a saved post, it will read the file size but doesn’t output the time of the file.

    Example: when adding tms_1471.mp3, it outputs
    File Size: 92882726
    Song Duration:

    JS Code:

    function metabox_mp3_analyze() {
    add_meta_box('mp3_start_box', 'Analyze MP3', 'mp3_start_box', 'post', 'normal', 'default');
};
add_action( 'add_meta_boxes', 'metabox_mp3_analyze' );
function mp3_start_box(){
?>
<style type="text/css">
    audio {display: none}
</style>
<script type="text/javascript">
jQuery(function(){
    var objectUrl;
    jQuery("#audio").on("canplaythrough", function(e){
        var seconds = e.currentTarget.duration;
        var duration = moment.duration(seconds, "seconds");
        var hours = duration.hours();
        var mins = duration.minutes();
        var secs = duration.seconds();
        if (hours < 10) { time_hour = "0" + hours + ":" ; } else { time_hour = hours + ":" ;};
        if (mins < 10) { time_mins = "0" + mins + ":" ; } else { time_mins = mins + ":" ;};
        if (secs < 10) { time_secs = "0" + secs} else { time_secs = secs};
        jQuery("#duration").text(time_hour+time_mins+time_secs);
        jQuery("#timelength").val(time_hour+time_mins+time_secs);
        URL.revokeObjectURL(objectUrl);
    });
    jQuery("#file").change(function(e){
        var file = e.currentTarget.files[0];
        jQuery("#filesize").text(file.size);
        jQuery("#size").val(file.size);
        objectUrl = URL.createObjectURL(file);
        jQuery("#audio").prop("src", objectUrl);
    });
});
</script>
<input type="file" id="file" />    
<audio id="audio"></audio>    
<p>
    <label>File Size:</label>
    <span id="filesize"></span>
    <input type="hidden" id="size" name="size" value=""/>
</p>    
<p>
    <label>Song Duration:</label>
    <span id="duration"></span>
    <input type="hidden" id="timelength" name="time" value=""/>
</p>        
<?php };
add_action('wp_head','mp3_start_box');
Viewing 1 replies (of 1 total)
  • Thread Starter openbayou

    (@openbayou)

    D’oh!

    In order for the script to run, it has to load a js file. I had it to load only for new posts.

    if ( $hook == 'post-new.php' &&  'post' == get_post_type() ) {
        wp_enqueue_script( 'admin-check', get_template_directory_uri() . '/js/admin-js.js', array ( 'jquery' ), 1, true); 
        wp_enqueue_script( 'moment-js', get_template_directory_uri() . '/js/moment.min.js', array ( 'jquery' ), 1, true);  
    }

    Got rid of if ( $hook == 'post-new.php' && 'post' == get_post_type() ) {

    • This reply was modified 6 years, 8 months ago by openbayou.
Viewing 1 replies (of 1 total)
  • The topic ‘JS code works on new post but doesn’t when updating’ is closed to new replies.

Tags