ทำเครื่องเล่นเสียงที่ตอบสนองต่อการสัมผัสด้วยปลั๊กอิน jQuery และ CSS [responsive]


เป็นอีกบทความที่เอามาแนะนำในเรื่องของปลั๊กอิน jQuery และการใช้ css โดยการสร้างปุ่ม play สำหรับการเล่นเพลงที่จะสามารถเล่นเพลงได้ทั่วไปแต่ส่วนใหญ่จะเป็นการใช้ media player หรือ flash ซึ่งจะต้องมีการลงปลั๊กอินในการใช้งานของแต่ล่ะบราวเซอร์โดยรูปแบบการสร้างเครื่องเล่นเพลงในวันนี้อย่างที่บอกครับจะเป็นการสร้างโดยปลั๊กอิน jQuery และ css โดยจะสามารถเล่นและแสดงผลได้ทุกบราวเซอร์และสามารถใช้ css เข้ามาช่วยในการออกแบบอีกด้วยแต่ที่น่าสนใจคือการสร้างแบบ RESPONSIVE ที่สามารถย่นย่อขนาดของเครื่องเล่นให้เข้ากับขนาดหน้าจอต่างๆได้เช่นบนหน้าจอของ iphone ipadmini หรือมือถืออื่นที่มีขนาดหน้าจอต่างๆ ก็จะสามารถปรับขนาดได้ตามอัตโนมัตินั้นเองเรามาลองดูตัวอย่างกันเลยดีกว่าครับ


เครื่องเล่นเพลงจะย่อตามขนาดหน้าจอครับ อันนี้ทดสอบจาก iphone ครับ


สามารถระบุลักษณะและเพลงที่เราจะใช้ในการเล่นได้ครับ แบบไม่ Auto

1
<audio src="audio.wav" preload="auto" controls></audio> <!--เล่นแบบไม่ Auto--->


สามารถระบุลักษณะและเพลงที่เราจะใช้ในการเล่นได้แบบ Auto

1
<audio src="audio.wav" preload="auto" controls autoplay loop></audio> <!--เล่นแบบ Auto--->


กำหนดชนิดของไฟล์ซึ่งแต่ล่ะบราวเซอร์จะเล่นชนิดไฟล์ที่ต่างกันครับควรทำไว้ให้ครบเพื่อการทำงานทุกระบบบราวเซอร์

1
2
3
4
5
<audio preload="auto" controls>
    <source src="audio.wav" />
    <source src="audio.mp3" />
    <source src="audio.ogg" />
</audio>


โค้ดการเรียกใช้งานปลั๊กอิน jQuery และ JS

1
2
3
4
<audio src="audio.wav" preload="auto" controls></audio>
<script src="jquery.js"></script>
<script src="audioplayer.js"></script>
<script>$( function() { $( 'audio' ).audioPlayer(); } );</script>


การกำหนดค่าในการกำหนดปุ่มควบคุม

1
2
3
4
5
6
7
$( 'audio' ).audioPlayer(
{
    classPrefix: 'player', // ค่าเริ่มต้น: 'audioplayer'
    strPlay: 'Play', // ค่าเริ่มต้น: 'Play'
    strPause: 'Pause', // ค่าเริ่มต้น: 'Pause'
    strVolume: 'Volume', // ค่าเริ่มต้น: 'Volume'
});

ดาวน์โหลดโค้ด…..!!!



ขอบคุณข้อมูลจาก http://tympanus.net/

Comments

comments

Powered by Facebook Comments