Cách tạo danh sách phát HTML đơn giản bằng cách sử dụng Jquery

Tôi cần trợ giúp tạo danh sách phát Jquery rất đơn giản bằng cách sử dụng thẻ html âm thanh. Cho đến nay tôi có của mình:Cách tạo danh sách phát HTML đơn giản bằng cách sử dụng Jquery

<audio id="myAudio" preload="auto"> 
    Your user agent does not support the HTML5 Audio element. 
</audio>

và phần jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script> 

$(document).ready(function() { 
    bgAudio = document.getElementById("myAudio"); 
    bgAudio.volume = 0.3; 

    bgAudio.controls = true; 
    bgAudio.loop = true; 
    bgAudio.autoplay = true; 

    bgAudio.src = "bg1.mp3"; 
    bgAudio.src = "bg2.mp3"; 
    bgAudio.play(); 

}); 
</script>

Làm thế nào tôi có thể làm cho chơi những 2 mp3 của cái khác? Cảm ơn đã giúp đỡ.

Nguồn

2016-02-18 user1286956

Không có yếu tố sử dụng animate để vì vậy tôi đã tạo một div#bg và bọc nó xung quanh phần tử âm thanh. Hãy nhớ rằng, nếu bạn muốn thực hiện một yếu tố mờ dần với opacity, chắc chắn rằng nguyên tố này bắt đầu với opacity:0
Khái niệm nên là: $('div#bg').animate({opacity: 1}, 1000);
tôi đã xem xét câu hỏi của bạn ... nó doesn không còn nữa animate() nữa?
Danh sách phát nằm trong một mảng.
Chức năng player() được kêu gọi document ready (Vì vậy, bạn không cần autoplay rằng các thiết bị di động bỏ qua anyways)
Người chơi sẽ chơi mỗi clip âm thanh liên tiếp và sau khi hoàn tất danh sách nhạc nó bắt đầu lặp lại (loop chỉ hoạt động trên một tập tin, chứ không phải trên danh sách phát. Vì vậy, bạn sẽ không bao giờ tiến đến file tiếp theo nếu loop=true)

Snippet

MNG- https://vocaroo.com/media_command.php?media=s0Ai9tr7779v&command=download_mp3 
 
Righteous- https://vocaroo.com/media_command.php?media=s1dKHkbev0dJ&command=download_mp3

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>35478017</title> 
 
</head> 
 

 
<body> 
 
    <div id='bg' style="opacity:0"> 
 
    <audio id="xAudio" preload="auto"></audio> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <script> 
 
    
 
    // This is a simple array of strings 
 
    var playlist = [ 
 
     "https://vocaroo.com/media_command.php?media=s1H9fX5GI9Fa&command=download_mp3", 
 
     "https://vocaroo.com/media_command.php?media=s0Ai9tr7779v&command=download_mp3", 
 
     "https://vocaroo.com/media_command.php?media=s1dKHkbev0dJ&command=download_mp3" 
 
    ]; 
 
    
 
    // Remember that element must start out at opacity:0 
 
    // The duration should be only a number outside of the curly brackets 
 
    $('div#bg').animate({ 
 
     opacity: 1 
 
    }, 1000); 
 

 

 
    $(document).ready(function() { 
 
     var xA = document.getElementById("xAudio"); 
 
     xA.volume = 0.3; 
 
     xA.controls = true; 
 

 

 
     function player(x) { 
 
     var i = 0; 
 
     xA.src = playlist[x]; // x is the index number of the playlist array 
 
     xA.load();   // use the load method when changing src 
 
     xA.play(); 
 
     xA.onended = function() { // Once the initial file is played it plays the rest of the files 
 
      /* This would be better as a 'for' loop */ 
 
      i++;     
 
      if (i > 2) {   //   ... Repeat 
 
      i = 0;    //  ^
 
      }      //  ^
 
      xA.src = playlist[i]; // Rinse,^
 
      xA.load();    // Lather,^
 
      xA.play();    // and.....^ 
 
     } 
 
     } 
 
     player(0); // Call the player() function at 0 index of playlist array 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

Nguồn

2016-02-18 10:47:47 zer00ne

Hoạt ảnh dành cho thành phần khác, không phải là trình phát. Tôi đã xóa nó khi tôi thấy tôi đã thêm nó do nhầm lẫn. – user1286956

Vâng nó thực sự thêm một IMO cảm ứng tốt đẹp. – zer00ne

Mã của bạn hoạt động tuyệt vời. Cảm ơn một tấn! Đây là kết quả cuối cùng: http://www.tzr.ro – user1286956

Một cách sẽ là sử dụng audio API để ràng buộc sự kiện onended vào số bgAudio và chuyển nguồn ở đó.

JS:

$(document).ready(function() { 

    var bgAudio = document.getElementById("myAudio"); 
    var src1 = "bg1.mp3"; 
    var src2 = "bg2.mp3"; 

    bgAudio.volume = 0.3; 

    bgAudio.controls = true; 
    bgAudio.loop = false; 
    bgAudio.autoplay = true; 
    bgAudio.src = src1; 

    bgAudio.onended = function(){ 
    bgAudio.stop(); 
    bgAudio.src = src2; 
    bgAudio.play(); 
    } 

    bgAudio.play(); 

});

Fiddle: https://jsfiddle.net/wpwddq30/

Chú ý: Đây là chưa được kiểm tra, chỉ để cung cấp cho một ý tưởng về những sự kiện

Nguồn

2016-02-18 10:32:58 OllieH

tôi đã cải thiện câu trả lời một chút, vì vậy bài hát ban đầu sẽ bắt đầu ngẫu nhiên và chỉ được theo dõi thứ tự thời gian của phần còn lại.

<script> 

    var playlist = [ 
     "music/bg1.mp3", 
     "music/bg2.mp3", 
     "music/bg3.mp3", 
     "music/bg4.mp3" 
    ]; 

    var n = playlist.length-1; 
    var r = 1 + Math.floor(Math.random() * n); 

    $(document).ready(function() { 
     var xA = document.getElementById("myAudio"); 
     xA.volume = 0.3; 
     xA.controls = true; 

     function player(x) { 
      var i = 0; 

      xA.src = playlist[r]; 
      xA.load(); 
      xA.play(); 
      xA.onended = function() { 
       i++; 
       if (i > n) { 
        i = 0; 
       } 

       xA.src = playlist[i]; 
       xA.load(); 
       xA.play(); 
      } 
     } 
     player(0); 
    }); 
    </script>

Tôi đã nghĩ đến việc làm cho tất cả các bài hát lặp lại theo cách ngẫu nhiên, nhưng tôi tin rằng tôi sẽ cần phải thực hiện một loạt các số để đếm chúng hoặc một thứ gì đó. Vẫn. nó chỉ là tùy chọn!

Nguồn

2016-02-18 13:54:55 user1286956

Cách tạo danh sách phát HTML đơn giản bằng cách sử dụng Jquery

Trả lời

Các vấn đề liên quan