อยากทราบวิธีทำให้ sound เสียงเล่นจาก ไฟล์แรกไล่ไปยังไฟล์สุดท้ายที่ต้องการได้

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา อยากทราบวิธีทำให้ sound เสียงเล่นจาก ไฟล์แรกไล่ไปยังไฟล์สุดท้ายที่ต้องการได้

มีคลิปเสียงที่ต้องการเล่น3คลิปหรือมากกว่านั้น โดย
-เสียงจะเริ่มเล่นอัตโนมัติเมื่อเข้าสู่หน้าเว็บ
-เสียงจะเริ่มเล่นจากไฟล์แรกไล่ไปไฟล์สุดท้าย
-เมื่อกด refresh จะต้องเริ่มไฟล์แรกใหม่
-เมื่อเล่นเสร็จจะขึ้นลิงค์ให้คลิก

<!DOCTYPE html>  
<html lang="en">  
<head>
<meta charset="UTF-8"> 
<title>เล่นเสียง</title>
</head>
1.<audio controls>
  <source src="sound/1BP2_010_new.mp3" type="audio/mpeg">
</audio>
<BR><BR>
2.<audio controls>
  <source src="sound/1BP2_011_new.mp3" type="audio/mpeg">
</audio>
<BR><BR>
3.<audio controls>
  <source src="sound/1BP2_012_new.mp3" type="audio/mpeg">
</audio>
<BR><BR>
<button>refresh</button>
<body>
</body>
</html>

Yuii Thiya 09-11-2016 17:19:26

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

จำเป็นที่ต้องแสดง player ทั้ง สามอัน หรือ มากกว่าหรือไม่
หรือว่าสามารถเล่นไฟล์ทั้ง สาม ใน player เดียว

ninenik 09-11-2016

ความคิดเห็นที่ 2

จำเป็นต้องแสดง player ทั้งสามค่ะ

Monster Ttax 09-11-2016 22:07

ความคิดเห็นที่ 3

-จำเป็นต้องโชว์playerด้วยค่ะ เปิดหน้านี้ขึ้นมาปั๊บไฟล์เสียงจะเริ่มเล่นจาก playerที่ 1 ทันที เมื่อจบก็จะไล่มาที่อันถัดไป -ส่วนปุ่ม refresh เมิ่อกดแล้วจะทำการเริ่มเล่นเสียงใหม่ตั้งแต่ playerแรก -เมื่อเล่นเสียงครบทุกอันแล้วจะโชว์ลิงค์

Yuii Thiya 09-11-2016 22:24

ความคิดเห็นที่ 4

ลองดูตัวอย่างโค้ดนี้เป็นแนวทาง เป็น php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link href="http://vjs.zencdn.net/5.11.9/video-js.css" rel="stylesheet">    
    <!-- If you'd like to support IE8 -->
    <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>    
	<script src="http://vjs.zencdn.net/5.11.9/video.js"></script>
	<style type="text/css">
    .hide_link{
        display: none;
    }
    .vjs-big-play-button {
      display: none !important;
    } 
    .vjs-control-bar {
        display: -webkit-box !important;
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }
    </style>
</head>
<body>
 
<div style="margin:auto;width:80%;">

<?php
$soruce_audio=array(
  '1'=>'https://s3.amazonaws.com/freesoundeffects/mp3/mp3_7224.mp3',
  '2'=>'https://s3.amazonaws.com/freesoundeffects/mp3/mp3_83239.mp3',
  '3'=>'https://www.freesoundeffects.com/preview/mp3_466268/swf'
);
?>

<?php foreach($soruce_audio as $k_audio=>$v_audio){?>
    <audio id="my-video<?=$k_audio?>" class="video-js" controls preload="auto"
           data-setup='{}' height="30" width="300">
    <source src="<?=$v_audio?>" type='audio/mp3'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </audio>
  <br>
  <?php } ?>
  
  
  <div class="hide_link">
  Show Link
  </div>

  
        
</div>  
    

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">



var myPlayer1 = videojs('my-video1'); 
var myPlayer2 = videojs('my-video2'); 
var myPlayer3 = videojs('my-video3'); 
myPlayer1.ready(function(){ // วิดีโอพร้อม
	myPlayer1.play(); 
	myPlayer1.on('ended',function(){
        myPlayer2.play(); 
	});	
});
myPlayer2.ready(function(){ // วิดีโอพร้อม
	myPlayer2.on('ended',function(){
        myPlayer3.play(); 
	});	
});
myPlayer3.ready(function(){ // วิดีโอพร้อม
	myPlayer3.on('ended',function(){
        $(".hide_link").show();	 // แสดงส่วนที่ซ่อนไว้			
	});	
});
</script>      
</body>
</html>

ตัวอย่างที่ได้

Show Link

>>> อัพเดท >>> 09-11-2016
------------------------------------------

ถ้าอยากให้ php สร้าง javascript อัตโนมัติตามจำนวนตัวแปรของ source ไฟล์เสียง สามารถกำหนด
ในส่วนของ javascript ที่สร้างด้วย php ประมาณนี้

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
<?php 
$total_source = count($soruce_audio); // นับมีทั้งหมดกี่เสียง
foreach($soruce_audio as $k_audio=>$v_audio){ // วนลูปสร้าง player 
?>
var myPlayer<?=$k_audio?> = videojs('my-video<?=$k_audio?>'); 
myPlayer<?=$k_audio?>.ready(function(){ // วิดีโอพร้อม
	<?php if($k_audio==1){ // ถ้าเป็นตัวแรก ให้เล่นอัตโนมัติเมื่อเปิดเข้ามา ?>
	myPlayer<?=$k_audio?>.play(); 
	<?php } ?>
	myPlayer<?=$k_audio?>.on('ended',function(){ // ถ้าตัวนั้นๆ เล่นจบ
		<?php if($k_audio<$total_source){ // และยังไม่ใช่ตัวสุดท้าย?>
		myPlayer<?=$k_audio+1?>.play();  // ให้เล่นตัวถัดไป
		<?php }else{ // ถ้าเป็นตัวสุดท้าย ?> 
        $(".hide_link").show();	 // แสดงส่วนที่ซ่อนไว้		
		<?php } ?>
	});	
});
<?php } ?>
</script>

ninenik 09-11-2016

ความคิดเห็นที่ 5

รบกวนอีกนิดนึงนะคะ
ถ้าโชว์เสียงที่ตัวเองเล่นโดยที่อันก่อนหน้ายังไม่หาย

เช่น
sound1 กำลังเล่น จะยังไม่โชว์ player อื่น

ต่อมา sound ที่2 เล่น จะโชว์อันก่อนหน้าด้วย แต่ยังไม่โชว์ player อันถัดไป
เช่น
sound 1
sound 2

และสุดท้ายวิธีการทำให้ progress bar ไม่เลื่อน คือบังคับให้ฟังจนจบแล้วค่อยเล่นอันถัดไป ต้องปรับตรงไหนบ้างคะ

Yuii Thiya 10-11-2016 09:34

ความคิดเห็นที่ 6

จากโค้ดตามตัวอย่างความเห็นที่ 4 สามารถกำหนดในส่วนของ js ประมาณนี้ได้

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
var myPlayer1 = videojs('my-video1'); 
var myPlayer2 = videojs('my-video2'); 
var myPlayer3 = videojs('my-video3'); 
$("#my-video2").hide();
$("#my-video3").hide();
myPlayer1.ready(function(){ // วิดีโอพร้อม
	myPlayer1.play(); 
	myPlayer1.on('ended',function(){
		$("#my-video2").show();
        myPlayer2.play(); 
	});	
});
myPlayer2.ready(function(){ // วิดีโอพร้อม
	myPlayer2.on('ended',function(){
		$("#my-video3").show();		
        myPlayer3.play(); 
	});	
});
myPlayer3.ready(function(){ // วิดีโอพร้อม
	myPlayer3.on('ended',function(){
        $(".hide_link").show();	 // แสดงส่วนที่ซ่อนไว้			
	});	
});
</script>

หรือถ้าใช้แบบ php ก็ใช้เป็น

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
<?php 
$total_source = count($soruce_audio); // นับมีทั้งหมดกี่เสียง
foreach($soruce_audio as $k_audio=>$v_audio){ // วนลูปสร้าง player 
?>
var myPlayer<?=$k_audio?> = videojs('my-video<?=$k_audio?>'); 
<?php if($k_audio!=1){ // ?>
$("#my-video<?=$k_audio?>").hide();
<?php } ?>
myPlayer<?=$k_audio?>.ready(function(){ // วิดีโอพร้อม
	<?php if($k_audio==1){ // ถ้าเป็นตัวแรก ให้เล่นอัตโนมัติเมื่อเปิดเข้ามา ?>
	myPlayer<?=$k_audio?>.play(); 
	<?php } ?>
	myPlayer<?=$k_audio?>.on('ended',function(){ // ถ้าตัวนั้นๆ เล่นจบ
		<?php if($k_audio<$total_source){ // และยังไม่ใช่ตัวสุดท้าย?>
		$("#my-video<?=$k_audio+1?>").show();		
		myPlayer<?=$k_audio+1?>.play();  // ให้เล่นตัวถัดไป
		<?php }else{ // ถ้าเป็นตัวสุดท้าย ?> 
        $(".hide_link").show();	 // แสดงส่วนที่ซ่อนไว้		
		<?php } ?>
	});	
});
<?php } ?>
</script>

ส่วนการป้องกันการ seek หรือการเลื่อน progress ของ video ถ้าเป็น script ต้องไปสร้างฟังก์ชั่นเพิ่มเติม

แต่แนะนำวิธีที่ง่ายที่สุด คือซ่อนส่วนของ progress ไปด้วย css style ประมาณนี้

	.vjs-progress-control{
      display: none !important;	
	}

>>> อัพเดท >>> 10-11-2016
------------------------------------------
ถ้าต้องการแสดง progress bar ด้วย แบบไม่ต้องซ่อนด้วย css ใช้โคด้รปะรมาณนี้

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>      
<script type="text/javascript">
<?php 
$total_source = count($soruce_audio); // นับมีทั้งหมดกี่เสียง
foreach($soruce_audio as $k_audio=>$v_audio){ // วนลูปสร้าง player 
?>
var myPlayer<?=$k_audio?> = videojs('my-video<?=$k_audio?>'); 
var supposedCurrentTime<?=$k_audio?> = 0;
<?php if($k_audio!=1){ // ?>
$("#my-video<?=$k_audio?>").hide();
<?php } ?>
myPlayer<?=$k_audio?>.ready(function(){ // วิดีโอพร้อม

    myPlayer<?=$k_audio?>.on('timeupdate',function(){  
		if(!myPlayer<?=$k_audio?>.seeking()){
			supposedCurrentTime<?=$k_audio?> = myPlayer<?=$k_audio?>.currentTime();
		}
    });  

    myPlayer<?=$k_audio?>.on('seeking',function(){  
		  var delta<?=$k_audio?> = myPlayer<?=$k_audio?>.currentTime() - supposedCurrentTime<?=$k_audio?>;
		  if (Math.abs(delta<?=$k_audio?>) > 0.01) {
				myPlayer<?=$k_audio?>.currentTime(supposedCurrentTime<?=$k_audio?>);
		  }
    });  
	
	<?php if($k_audio==1){ // ถ้าเป็นตัวแรก ให้เล่นอัตโนมัติเมื่อเปิดเข้ามา ?>
	myPlayer<?=$k_audio?>.play(); 
	<?php } ?>
	myPlayer<?=$k_audio?>.on('ended',function(){ // ถ้าตัวนั้นๆ เล่นจบ
		<?php if($k_audio<$total_source){ // และยังไม่ใช่ตัวสุดท้าย?>
		$("#my-video<?=$k_audio+1?>").show();		
		myPlayer<?=$k_audio+1?>.play();  // ให้เล่นตัวถัดไป
		<?php }else{ // ถ้าเป็นตัวสุดท้าย ?> 
        $(".hide_link").show();	 // แสดงส่วนที่ซ่อนไว้		
		<?php } ?>
		supposedCurrentTime<?=$k_audio?> = 0;
	});	
});
<?php } ?>
</script>

ninenik 10-11-2016

ความคิดเห็นที่ 7

ต่อจากความคิดเห็นที่ 5 ค่ะ
ทำให้ progress bar ไม่เลื่อน คือบังคับให้ฟังจนจบแล้วค่อยเล่นอันถัดไป ต้องปรับตรงไหนบ้างคะ
ถ้าไม่ต้องการปิดโปรเกรสบาร์แล้ว แต่จะปิดไม่ให้กดปุ่ม play อันก่อนหน้าไปเลยได้ไหมคะ
เพราะอยากให้เล่นเฉพาะอันล่าสุด จะได้ลดการซ้ำซ้อนของเสียงด้วย

อีกเรื่องคือ โค้ดที่ให้มา support กับ IE version ไหนขึ้นไปคะ

Yuii Thiya 10-11-2016 14:35

ความคิดเห็นที่ 8

ตามความเห็นที่ 6 มีโค้ดป้องกันการ เลื่อน progress bar เป็นตัวอย่างแล้ว
ส่วนรองรับ IE ไหม ต้องไปลองทดสอบดู

>>> อัพเดท >>> 10-11-2016
------------------------------------------
ซ่อนปุ่ม play ใช้ css ตัวนี้

	.vjs-play-control,
	.js-paused{
		display: none !important;	
	}

ninenik 10-11-2016

ความคิดเห็นที่ 9

แล้วถ้าจะให้กด refresh แล้วเริ่มเสียงแรกใหม่ ต้องทำยังไงคะ

Yuii Thiya 11-11-2016 10:23

ความคิดเห็นที่ 10

<button type="button" onClick="myPlayer1.play();">Refresh</button>

ninenik 11-11-2016

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน