将src文件动态插入音频标签并将src名称存储在html代码中

Question

我一直在编写一些播放音频文件的代码。我已经使用了一个音频播放器，当点击一个按钮时，相应的src文件ogg和mp3会动态插入到音频播放器的源标签中。我可以看到这样做的唯一方法（同时也试图避免内联javascript onclick事件处理程序）如下。我有mp3文件的目录和存储在带有id的div标签中的ogg文件。然后用css隐藏了标签。 （这个文件名将从数据库中提取出来）无论如何，我觉得将内容隐藏在这样的div中并不是一个好习惯。我总是尽力跟上最佳实践。你有什么想法，有什么可能更好吗？感谢

我的HTML：

    <ul id='audio_list'>

                <li class='gradient_blackblue'>

                    <div class='audio_controls_area'>
                    <div id='timer'></div>
                        <div class='circle'></div>
                        <div class ='play_pause'>
                            <div class='play button_style' id='btnPlayPause0'><i class='fa fa-play'></i>
                            <div id='file_mp3'>music/electronic beat-monksee.mp3</div>
                            <div id='file_ogg'>music/electronic beat-monksee.ogg</div>
                            </div>  
                        </div>

                    </div>
                    <div class='audio_description'>Electro Soundz
                        <div id='slider_area'>
                        <span id='songTime0' class='songTime'>0:00</span>
                        <input id='sliderTime0' class='slider' type='range' min='0' value='0'/>
                        </div>
                    </div>

                </li>


                <li class='gradient_blackblue'>
                    <div class='audio_controls_area'>
                        <div id='timer'></div>
                        <div class='circle'></div>
                        <div class ='play_pause'>
                            <div class='play button_style' id='btnPlayPause1'><i class='fa fa-play'></i>
                                <div id='file_mp3'>music/dubstep.mp3</div>
                                <div id='file_ogg'>music/dubstep.mp3</div>
                            </div>  
                        </div>

                    </div>
                    <div class='audio_description'>Dubstep beat
                        <div id='slider_area'>
                        <span id='songTime1' class='songTime'>0:00</span>
                        <input id='sliderTime1' class='slider' type='range' min='0' value='0' />
                        </div>
                    </div>

            </li>
</ul>

    <audio id ='audio_player'>
    <source id='src_mp3' type='audio/mp3'/>
    <source id='src_ogg' type='audio/ogg'/>
    <object id='audio_object' type='audio/x-mpeg' width='200px' height='45px' >
            <param id = 'param_src' name='src'/>
            <param name='autoplay' value='false' />
            <param name='autostart' value='false' />
        </object>
    </audio>

我的css：

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body{


}

.play_pause {
 width: 50px;
  height: 50px;
  margin: 15px;
  position: relative;

}

.play_pause .button_style{
  cursor: pointer;
width:100%;
height:100%;
display: block;
position: relative;
border-radius: 50%;
border-bottom: 1px outset #1532AE;
color: #fff; /*color of play before pressed*/
font-size: 30px;
text-align: center;
line-height: 50px;
background: rgb(9,178,249); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(9,178,249,1) 0%, rgba(11,164,237,1) 15%, rgba(20,76,173,1) 73%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(9,178,249,1)), color-stop(15%,rgba(11,164,237,1)), color-stop(73%,rgba(20,76,173,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(9,178,249,1) 0%,rgba(11,164,237,1) 15%,rgba(20,76,173,1) 73%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(9,178,249,1) 0%,rgba(11,164,237,1) 15%,rgba(20,76,173,1) 73%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(9,178,249,1) 0%,rgba(11,164,237,1) 15%,rgba(20,76,173,1) 73%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(9,178,249,1) 0%,rgba(11,164,237,1) 15%,rgba(20,76,173,1) 73%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#09b2f9', endColorstr='#144cad',GradientType=0 ); /* IE6-9 */
z-index: 1;
}

.play_pause .play{
box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.13),
    0 5px 8px rgba(0,0,0,0.3),
    0 8px 10px 2px rgba(0,0,0,0.6); /*this is what makes it look like it is being pressed*/
text-shadow: 0 2px 0px rgba(0,0,0,0.25); /*the middle text*/
}

.play_pause .button_style:before {
  content: ""; 
  position: absolute;
  left: -8px;
  right: -8px;
  top: -8px;
  bottom: -8px;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 10px 10px rgba(0,0,0,0.13); 
  -webkit-filter:blur(1px); /*smooth trick*/
  -moz-filter:blur(1px);
  -ms-filter:blur(1px);
  -o-filter:blur(1px);
  filter: blur(1px); /*future proof*/

}

.play_pause .button_style:after {
  content: ""; 
  position: absolute;
  left: -8px;
  right: -8px;
  top: -8px;
  bottom: -8px;
  z-index: -2;
  border-radius: inherit;
box-shadow:
    inset 0 1px 0 rgba(255,255,255,1), /*tried changin but its just blue line around outside*/
    0 1px 2px rgba(0,0,0,0.3),
    0 0 10px rgba(5,52,140,1); /*outside shadow line*/
  }

.play_pause .isPlaying { /*button*/
  box-shadow:
    inset 0 2px 3px rgba(157,157,157,0.13),
    0 5px 8px rgba(0,0,0,0.35),
    -1px -1px 8px 0px rgba(0,0,0,0.6);
text-shadow: rgb(70, 70, 70) -1px -1px 1px;
} 


.play_pause .fa-play:after {
  content: "";
  display: block;
  position: absolute;
  width: 70%;
  height: 70%;
  left: 50%;
  top: 50%;
  z-index: -1;
  margin: -37% 0 0 -40%;

}

.play_pause .fa-stop{
content: "";
display: block;
position: absolute;
width: 70%;
height: 70%;
left: 13%;
top: 21%;
font-size: 26px;
z-index: -2;
}


.circle {
  content: ""; 
  position: absolute;
background: #fff;
left: 10%;

  top: 9%;
width: 64px;
height: 64px;
  z-index: -50;
  border-radius: 50%;
}


#timer{
position: absolute;
left: 10%;
top: 9%;
width: 64px;
height: 64px;
  z-index: -45;
  border-radius: 50%;
}

#timer:before, #timer.timer{
display: none;
    content: "";
    position: absolute;
    width: 6px;
    height: 64px;
    left: 46%;

    z-index: -1;
    background: url(timer.png) 0 0 no-repeat;

}


#file_mp3{
display: none;

}
#file_ogg{
display: none;

}

Javscript和jquery：

var player;
    var intv;
    var slider;
    var max;
    var duration;

    //init
    window.onload = function(){
    player = document.getElementById('audio_player');
    }


    function playMusic(songTime, button){
    player.play();
    intv = setInterval(function() { update(songTime, button); }, 100);
    $(player).on("loadeddata", function(){
            window.degreePerSecond = 360/window.duration;
            $(window.timer).addClass('timer');
            $('#timer.timer').css({
            'display':'block'

            });
    });


    }

    function pauseMusic(){
    player.pause();
    clearInterval(intv);
    }

    function stopMusic(){
    player.pause();
    player.currentTime = 0;
    clearInterval(intv);
    }

    function reposition(){
    var reposition_value = $(slider).val();
    player.currentTime = reposition_value;

    }

    function update(songTime, button){
    $(songTime).html(millisToMins(player.currentTime));
    $(slider).val(player.currentTime);
    var current = player.currentTime;

    var degreeCurrent = (window.degreePerSecond*current);
    $(window.timer).css({
    '-webkit-transform':'rotate(' + degreeCurrent + 'deg)',
    '-moz-transform': 'rotate(' + degreeCurrent + 'deg)',
    '-ms-transform': 'rotate(' + degreeCurrent + 'deg)',
    '-o-transform' : 'rotate(' + degreeCurrent + 'deg)',
    'transform' : 'rotate(' + degreeCurrent + 'deg)'
    });

    if ((player.duration > 0) && (player.currentTime== player.duration)){
        $(button).addClass("play").removeClass("isPlaying");
        $(button).children("i").addClass("fa-play").removeClass("fa-stop");
        $(window.timer).removeClass('timer');
        $(window.timer).removeAttr('style');

        //alert("player duration");
        stopMusic();

    }

    }

    function millisToMins(seconds){
    var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
    var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
    if (numseconds >= 10){
    return numminutes + ":" + Math.round(numseconds);
    }else{
    return numminutes + ":0" + Math.round(numseconds);
    }
    }

    $(document).ready(function(){
    $('li .button_style').click(function(){
            $(window.timer).removeClass('timer');
            $(window.timer).removeAttr('style');
            //console.log($(window.timer).closest('li').html());
            clearInterval(intv);

        if($(this).hasClass("isPlaying")){
            pauseMusic();
            $(this).addClass("play").removeClass("isPlaying");
            $(this).children("i").addClass("fa-play").removeClass("fa-stop");

        }else if($(this).hasClass("play")){
            var mp3 = $('> #file_mp3', this).html();
            var ogg = $('> #file_ogg', this).html();
            $('#src_mp3').attr('src', mp3);
            $('#src_ogg').attr('src', ogg);
            $('#audio_object').attr('data', mp3);
            $('#param_src').attr('value', mp3);
            player.load();

            songTime = $('.songTime', $(this).closest('li'));
            window.timer = $('#timer', $(this).closest('li'));
            slider = $('.slider', $(this).closest('li'));
            $(slider).on('change', reposition);
            $(player).on("loadeddata", function(){
                window.duration = player.duration;
                $(slider).attr('max', window.duration);
            });

            var button = $(this);
            playMusic(songTime, button);
            $(".button_style").addClass("play").removeClass("isPlaying");
            $("div").children("i").addClass("fa-play").removeClass("fa-stop");
            $(this).children("i").removeClass("fa-play").addClass("fa-stop");
            $(this).removeClass("play").addClass("isPlaying");
        console.log($('#audio_list').html());
        }
    });



});

代码的jsfiddle http://jsfiddle.net/LAZay/2/

Answer 1

我找到了解决方法。使用php从数据库加载文件时。我将mp3和ogg文件目录存储到两个php数组中，而不是将它们放在一个隐藏的div中。然后我将其转换为javascript数组，当按下相应的播放按钮时，例如btnPlaypause0，然后将mp3array [0]源文件插入音频标签的source属性然后播放。这是我的html / php代码：

<?php
    require("music_connect.php");       
    $mp3_php = array();
    $ogg_php = array();
    $result = mysqli_query($con,"SELECT * FROM products");
    if (!$result) {
            printf("Error: %s\n", mysqli_error($con));
            exit();
    }

    while($row = mysqli_fetch_array($result)){
        array_push($mp3_php, $row['Productmp3']);
        array_push($ogg_php, $row['ProductOgg']);
    }

?>

    <?php

    $result = mysqli_query($con,"SELECT * FROM products");
    if (!$result) {
            printf("Error: %s\n", mysqli_error($con));
            exit();
    }
    echo "<ul id='audio_list'>";
    $x = 0;
        while($row = mysqli_fetch_array($result)){

            echo "<li class='gradient_blackblue'>
            <div class='audio_controls_area'>
                <div id='timer" . $x . "' class='timer_style timer_small'></div>
                <div class='circle'></div>
                <div class ='play_pause'>
                <div class='play button_style' id='btnPlayPause" . $x . "'><i class='fa fa-play'></i></div> 
                </div>

            </div>
            <div class='audio_description'>" . $row['ProductName'] . "
                <div class='artist'>" . $row['ProductArtist'] . "</div>
                <div id='slider_area'>
                <span id='songTime" . $x . "' class='songTime'>0:00</span>
                <input id='slider" . $x . "' class='slider' type='range' min='0' value='0' />
                </div>

            </div>
            <a href='electro_soundz.php'><i class='fa fa-chevron-right'></i></a>
            </li>";
            $x++;

        }
    echo "</ul>";
    mysqli_close($con);
    ?>


<audio id ='audio_player'>
<source id='src_mp3' type='audio/mp3'/>
<source id='src_ogg' type='audio/ogg'/>
<object id='audio_object' type='audio/x-mpeg' width='200px' height='45px' >
        <param id = 'param_src' name='src'/>
        <param name='autoplay' value='false' />
        <param name='autostart' value='false' />
    </object>
</audio>

和javascript：

    <script>

        var player;
        var intv;
        var slider;
        var songTime;
        var max;
        var duration;

        //init
        window.onload = function(){

            player = document.getElementById('audio_player');

            window.mp3_array= <?php echo json_encode($mp3_php); ?>;
            window.ogg_array= <?php echo json_encode($ogg_php); ?>;
            var mp3_length = window.mp3_array.length;
                for(var i=0;i<mp3_length;i++){
            listenForI(i);
                }
            console.log(window.mp3_array);
            console.log(window.ogg_array);

        }
        function listenForI(i){
            document.getElementById('btnPlayPause' + i).addEventListener('click', function() { songSelect(i); }, false);
        }
        function playMusic(songTime, button){
    player.play();
    intv = setInterval(function() { update(songTime, button); }, 100);
}


function pauseMusic(){
    player.pause();
    clearInterval(intv);
}

function stopMusic(){
    player.pause();
    player.currentTime = 0;
    clearInterval(intv);
}

function reposition(){
    var reposition_value = $(slider).val();
    player.currentTime = reposition_value;

}

function update(songTime, button){
    document.getElementById(songTime).innerHTML = millisToMins(player.currentTime);
    $(slider).val(player.currentTime);
    var current = player.currentTime;
    var degreeCurrent = (window.degreePerSecond*current);
    $(window.timer).css({
    '-webkit-transform':'rotate(' + degreeCurrent + 'deg)',
    '-moz-transform': 'rotate(' + degreeCurrent + 'deg)',
    '-ms-transform': 'rotate(' + degreeCurrent + 'deg)',
    '-o-transform' : 'rotate(' + degreeCurrent + 'deg)',
    'transform' : 'rotate(' + degreeCurrent + 'deg)'
    });

    if ((player.duration > 0) && (player.currentTime== player.duration)){
        $(button).addClass("play").removeClass("isPlaying");
        $(button).children("i").addClass("fa-play").removeClass("fa-stop");
        $(window.timer).removeClass('timer');
        $(window.timer).removeAttr('style');
        stopMusic();    
    }

}

function millisToMins(seconds){
    var numminutes = Math.floor((((seconds % 31536000) % 86400) % 3600) / 60);
    var numseconds = (((seconds % 31536000) % 86400) % 3600) % 60;
    if (numseconds >= 10){
        return numminutes + ":" + Math.round(numseconds);
    }else{
        return numminutes + ":0" + Math.round(numseconds);
    }
}

function songSelect(x){
    $(window.timer).removeClass('timer');
    $(window.timer).removeAttr('style');
    clearInterval(intv);
    var button = '#' + 'btnPlayPause' + x;
    if($(button).hasClass("isPlaying")){
        pauseMusic();
        $(button).addClass("play").removeClass("isPlaying");
        $(button).children("i").addClass("fa-play").removeClass("fa-stop");
    }else if($(button).hasClass("play")){
        var mp3 = window.mp3_array[x];
        var ogg = window.ogg_array[x];
        $('#src_mp3').attr('src', mp3);
        $('#src_ogg').attr('src', ogg);
        $('#audio_object').attr('data', mp3);
        $('#param_src').attr('value', mp3);
        console.log($('#audio_player').html());
        player.load();
        songTime = 'songTime' + x;
        window.timer = '#timer' + x;
        slider = '#slider' + x;
        $(slider).on('change', reposition);
        $(player).on("loadeddata", function(){
            window.duration = player.duration;
            $(slider).attr('max', window.duration);
            window.degreePerSecond = 360/window.duration;
            $(window.timer).addClass('timer');
            $('.timer_style.timer').css({
                'display':'block'

            });
        });
        playMusic(songTime, button);
        $("div").addClass("play").removeClass("isPlaying");
        $("div").children("i").addClass("fa-play").removeClass("fa-stop");
        $(button).children("i").removeClass("fa-play").addClass("fa-stop");
        $(button).removeClass("play").addClass("isPlaying");    
    }
}




    </script>