{"id":1007,"date":"2025-05-03T19:22:34","date_gmt":"2025-05-03T19:22:34","guid":{"rendered":"https:\/\/tommyjmagnum.com\/?page_id=1007"},"modified":"2025-05-03T21:22:47","modified_gmt":"2025-05-03T21:22:47","slug":"home2","status":"publish","type":"page","link":"https:\/\/tommyjmagnum.com\/index.php\/home2\/","title":{"rendered":"home2"},"content":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; module_class=&#8221;spotify-bg-section&#8221; _builder_version=&#8221;4.24.0&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_direction=&#8221;135deg&#8221; background_color_gradient_stops=&#8221;#000000 0%|rgba(0,0,0,0.69) 19%|rgba(37,37,37,0) 50%|#000000 67%|#000000 87%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/headerbg.webp&#8221; min_height=&#8221;75vh&#8221; height=&#8221;75vh&#8221; max_height=&#8221;75vh&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; title_text=&#8221;headerbg&#8221; sticky_enabled=&#8221;0&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;4.24.0&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; positioning=&#8221;absolute&#8221; vertical_offset=&#8221;50px&#8221; horizontal_offset=&#8221;50px&#8221; custom_margin=&#8221;0px||0px||true|false&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.24.0&#8243; _module_preset=&#8221;default&#8221; header_font=&#8221;Bungee Inline|700||on|||||&#8221; header_text_align=&#8221;left&#8221; header_text_color=&#8221;#FFFFFF&#8221; custom_margin=&#8221;0px||0px||true|false&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; global_colors_info=&#8221;{}&#8221;]<\/p>\n<h1>Tommy J. Magnum<\/h1>\n<p>[\/et_pb_text][et_pb_text _builder_version=&#8221;4.24.0&#8243; _module_preset=&#8221;default&#8221; text_text_color=&#8221;#bfbfbf&#8221; header_font=&#8221;Bungee Inline|700||on|||||&#8221; header_text_align=&#8221;left&#8221; header_text_color=&#8221;#FFFFFF&#8221; custom_margin=&#8221;0px||0px||true|false&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; global_colors_info=&#8221;{}&#8221;]&#8221;I don&#8217;t just make beats \u2014 I build the stage where legends perform.&#8221;[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=&#8221;1&#8243; _builder_version=&#8221;4.24.0&#8243; _module_preset=&#8221;default&#8221; background_color=&#8221;RGBA(255,255,255,0)&#8221; custom_margin=&#8221;0px||0px||true|false&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_row use_custom_gutter=&#8221;on&#8221; gutter_width=&#8221;1&#8243; make_equal=&#8221;on&#8221; _builder_version=&#8221;4.24.0&#8243; _module_preset=&#8221;default&#8221; width=&#8221;90%&#8221; max_width=&#8221;100%&#8221; custom_margin=&#8221;-200px||||false|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.24.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_code _builder_version=&#8221;4.24.0&#8243; _module_preset=&#8221;default&#8221; global_colors_info=&#8221;{}&#8221;]    <div id=\"site-overlay\" class=\"site-overlay\"><\/div>\n    <div id=\"spotify-popup\" class=\"spotify-popup\">\n        <div class=\"spotify-popup-content\">\n            <span class=\"spotify-popup-close\">\u00d7<\/span>\n            <div class=\"track-details\">\n                <img decoding=\"async\" src=\"\" class=\"track-image\" alt=\"Album Cover\">\n                <div class=\"track-info\">\n                    <h3 class=\"track-name\"><\/h3>\n                    <p class=\"track-artist\"><\/p>\n                    <p class=\"track-album\"><\/p>\n                <\/div>\n            <\/div>\n            <p>Listen to the full version on Spotify<\/p>\n            <a href=\"#\" id=\"spotify-popup-link\" class=\"spotify-popup-button\" target=\"_blank\">Listen on Spotify<\/a>\n        <\/div>\n    <\/div>\n    <div class=\"spotify-carousel-wrapper\">\n        <h2 class=\"carousel-title\">Listen<\/h2>\n        <div class=\"spotify-carousel-container\">\n            <div class=\"spotify-carousel\">\n                                    <div class=\"carousel-item\" data-index=\"0\" data-spotify-url=\"https:\/\/open.spotify.com\" data-track-name=\"Onbekende track\" data-artist=\"Onbekende artiest\" data-album=\"Whoop\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/Unknown-Album.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/Unknown-Album.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: Whoop<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"0\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">Onbekende track<\/h2>\n                                <p class=\"track-artist\">Onbekende artiest<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1367\" preload=\"metadata\" src=\"\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"1\" data-spotify-url=\"https:\/\/open.spotify.com\/track\/0MJtxBb2Qpne8jQnvGo4K7\" data-track-name=\"Whoop\" data-artist=\"Kryptik Draggan\" data-album=\"Onbekend album\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/Unknown-Album.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/Unknown-Album.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: Onbekend album<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"1\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">Whoop<\/h2>\n                                <p class=\"track-artist\">Kryptik Draggan<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1530\" preload=\"metadata\" src=\"https:\/\/p.scdn.co\/mp3-preview\/73f22c5356f8559daf63358b3418183531b22410\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"2\" data-spotify-url=\"https:\/\/open.spotify.com\" data-track-name=\"Onbekende track\" data-artist=\"Onbekende artiest\" data-album=\"7\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: 7<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"2\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">Onbekende track<\/h2>\n                                <p class=\"track-artist\">Onbekende artiest<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1364\" preload=\"metadata\" src=\"\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"3\" data-spotify-url=\"https:\/\/open.spotify.com\/track\/4JX6S0MOMpIKbgHO2tkpyz\" data-track-name=\"Make a Hole\" data-artist=\"Kryptik Draggan\" data-album=\"7\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: 7<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"3\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">Make a Hole<\/h2>\n                                <p class=\"track-artist\">Kryptik Draggan<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1491\" preload=\"metadata\" src=\"https:\/\/p.scdn.co\/mp3-preview\/538d8b87ce165373c2613c9309bbd2a9e447317d\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"4\" data-spotify-url=\"https:\/\/open.spotify.com\/track\/2WgDhpEFIJONdYXIPdIZPH\" data-track-name=\"Run the World\" data-artist=\"Kryptik Draggan\" data-album=\"7\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: 7<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"4\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">Run the World<\/h2>\n                                <p class=\"track-artist\">Kryptik Draggan<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1492\" preload=\"metadata\" src=\"https:\/\/p.scdn.co\/mp3-preview\/c0e03bd1b4a68c2011d2ee112f64266abc9fb3d4\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"5\" data-spotify-url=\"https:\/\/open.spotify.com\/track\/3VcKq2pQ0a06IxsbuStb56\" data-track-name=\"So Far so Good\" data-artist=\"Kryptik Draggan\" data-album=\"7\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: 7<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"5\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">So Far so Good<\/h2>\n                                <p class=\"track-artist\">Kryptik Draggan<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1493\" preload=\"metadata\" src=\"https:\/\/p.scdn.co\/mp3-preview\/45f6e6bcae29fe5d057ca1b753b5ed48fb2c7ece\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"6\" data-spotify-url=\"https:\/\/open.spotify.com\/track\/5QfV5f8yYViYxE2TGpgxGF\" data-track-name=\"Come in out the Cold\" data-artist=\"Kryptik Draggan\" data-album=\"7\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: 7<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"6\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">Come in out the Cold<\/h2>\n                                <p class=\"track-artist\">Kryptik Draggan<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1494\" preload=\"metadata\" src=\"https:\/\/p.scdn.co\/mp3-preview\/88b488e3c672a65897c727302f16c580793fb283\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"7\" data-spotify-url=\"https:\/\/open.spotify.com\/track\/1GfJdXlrlGA6rKMdwH7a6Y\" data-track-name=\"Get to Work\" data-artist=\"Kryptik Draggan\" data-album=\"7\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: 7<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"7\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">Get to Work<\/h2>\n                                <p class=\"track-artist\">Kryptik Draggan<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1495\" preload=\"metadata\" src=\"https:\/\/p.scdn.co\/mp3-preview\/edbb952e55b7319259fc4f72d71db1adfbb5f80d\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"8\" data-spotify-url=\"https:\/\/open.spotify.com\/track\/5nxYk5MILVqvqywMQLbwY0\" data-track-name=\"The Uh\" data-artist=\"Kryptik Draggan\" data-album=\"7\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: 7<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"8\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">The Uh<\/h2>\n                                <p class=\"track-artist\">Kryptik Draggan<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1496\" preload=\"metadata\" src=\"https:\/\/p.scdn.co\/mp3-preview\/4b1b6d78f1c3675c9341eff7bbe7ba2b0763491d\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                                    <div class=\"carousel-item\" data-index=\"9\" data-spotify-url=\"https:\/\/open.spotify.com\/track\/02kuN6cNWYrLbEjR8YIiEx\" data-track-name=\"Crown\" data-artist=\"Kryptik Draggan\" data-album=\"7\" data-image=\"https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg\" style=\"background-image: url('https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/7.jpg');\">\n                        <div class=\"carousel-overlay\"><\/div>\n                        <div class=\"gradient-overlay\"><\/div>\n                        <p class=\"album-label\">Album: 7<\/p>\n                        <div class=\"carousel-content\">\n                            <button class=\"play-button\" data-index=\"9\">\n                                <svg class=\"play-icon active\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <path d=\"M6 4L20 12L6 20V4Z\" fill=\"#1DB954\"\/>\n                                <\/svg>\n                                <svg class=\"pause-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                                    <rect x=\"5\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                    <rect x=\"14\" y=\"4\" width=\"5\" height=\"16\" rx=\"1\" fill=\"#FFFFFF\"\/>\n                                <\/svg>\n                            <\/button>\n                            <div class=\"track-info\">\n                                <h2 class=\"track-title\">Crown<\/h2>\n                                <p class=\"track-artist\">Kryptik Draggan<\/p>\n                                <div class=\"audio-controls\">\n                                    <audio id=\"track-preview-1497\" preload=\"metadata\" src=\"https:\/\/p.scdn.co\/mp3-preview\/3c8d07b6124901c23eacad1916c6300b39075a4a\">\n                                        Je browser ondersteunt geen audio-elementen.\n                                    <\/audio>\n                                    <div class=\"progress-bar\">\n                                        <div class=\"progress\"><\/div>\n                                    <\/div>\n                                    <span class=\"duration\">00:00<\/span>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                            <\/div>\n            <div class=\"carousel-nav-container\">\n                <button class=\"carousel-nav prev\">\u2039<\/button>\n                <button class=\"carousel-nav next\">\u203a<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;700;900&display=swap');\n\n        \/* General Reset *\/\n        * {\n            box-sizing: border-box;\n            margin: 0;\n            padding: 0;\n        }\n\n        \/* Site Overlay *\/\n        .site-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.8);\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.3s ease;\n            z-index: 1000;\n        }\n\n        .site-overlay.active {\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        \/* Popup Styling *\/\n        .spotify-popup {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.75);\n            display: none;\n            z-index: 2000;\n            animation: fadeIn 0.3s ease-out;\n        }\n\n        .spotify-popup-content {\n            position: fixed;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%, -50%);\n            background: linear-gradient(145deg, #2a2a2a, #1e1e1e);\n            padding: 25px;\n            border-radius: 12px;\n            text-align: left;\n            color: #ffffff;\n            font-family: 'Montserrat', sans-serif;\n            max-width: 350px;\n            width: 90%;\n            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\n            opacity: 0;\n            animation: popupAppear 0.3s ease-out forwards;\n        }\n\n        .spotify-popup-close {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            width: 30px;\n            height: 30px;\n            background: rgba(255, 255, 255, 0.1);\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 18px;\n            cursor: pointer;\n            color: #ffffff;\n            transition: transform 0.3s ease, background 0.3s ease;\n        }\n\n        .spotify-popup-close:hover {\n            background: rgba(255, 255, 255, 0.2);\n            transform: rotate(90deg);\n        }\n\n        .track-details {\n            display: flex;\n            align-items: center;\n            margin-bottom: 20px;\n        }\n\n        .track-image {\n            width: 80px;\n            height: 80px;\n            border-radius: 8px;\n            object-fit: cover;\n            margin-right: 15px;\n            border: 1px solid rgba(255, 255, 255, 0.1);\n            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);\n        }\n\n        .track-info {\n            flex: 1;\n        }\n\n        .track-name {\n            font-size: 20px;\n            font-weight: 700;\n            margin: 0;\n            color: #ffffff;\n        }\n\n        .track-artist {\n            font-size: 14px;\n            font-weight: 400;\n            color: #b3b3b3;\n            margin: 5px 0 0;\n        }\n\n        .track-album {\n            font-size: 13px;\n            font-weight: 400;\n            color: #b3b3b3;\n            margin: 3px 0 0;\n        }\n\n        .spotify-popup-content > p {\n            font-size: 15px;\n            color: #ffffff;\n            margin-bottom: 20px;\n            text-align: center;\n        }\n\n        .spotify-popup-button {\n            display: inline-block;\n            padding: 12px 24px;\n            background: #1DB954;\n            color: #ffffff;\n            text-decoration: none;\n            border-radius: 25px;\n            font-size: 14px;\n            font-weight: 500;\n            transition: background 0.3s ease, transform 0.2s ease;\n        }\n\n        .spotify-popup-button:hover {\n            background: #1ed760;\n            transform: scale(1.05);\n        }\n\n        \/* Popup Animations *\/\n        @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        @keyframes popupAppear {\n            from {\n                transform: translate(-50%, -50%) scale(0.8);\n                opacity: 0;\n            }\n            to {\n                transform: translate(-50%, -50%) scale(1);\n                opacity: 1;\n            }\n        }\n\n        \/* Carousel Styling *\/\n        .spotify-carousel-wrapper {\n            position: relative;\n            width: 100%;\n            padding: 20px 0;\n        }\n\n        .carousel-title {\n            font-family: 'Anton', sans-serif;\n            font-size: 24px;\n            font-weight: 700;\n            color: #ffffff;\n            margin-bottom: 20px;\n            text-align: left;\n        }\n\n        .spotify-carousel-container {\n            position: relative;\n            width: 100%;\n            font-family: 'Montserrat', sans-serif;\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n            overflow: hidden;\n            z-index: 1100;\n        }\n\n        .spotify-carousel {\n            display: flex;\n            width: 100%;\n            transition: transform 0.3s ease;\n            will-change: transform;\n        }\n\n        .carousel-item {\n            flex: 0 0 22%;\n            height: 400px;\n            background-size: cover;\n            background-position: center;\n            background-color: #000;\n            position: relative;\n            opacity: 0.7;\n            transition: opacity 0.3s ease, flex 0.3s ease, margin-right 0.3s ease;\n            border-radius: 8px;\n            margin-right: 10px;\n            z-index: 10;\n        }\n\n        .carousel-item:last-child {\n            margin-right: 0;\n        }\n\n        .carousel-item.active {\n            opacity: 1;\n        }\n\n        .carousel-item.playing {\n            flex: 0 0 33%;\n            opacity: 1;\n            z-index: 1200;\n        }\n\n        .has-playing .carousel-item {\n            margin-right: 5px;\n        }\n\n        .carousel-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.3);\n            border-radius: 8px;\n            z-index: 1;\n        }\n\n        .gradient-overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 24%, rgba(0, 0, 0, 0) 51%);\n            opacity: 1;\n            transition: background 0.3s ease, opacity 0.3s ease;\n            border-radius: 8px;\n            z-index: 2;\n        }\n\n        .carousel-item.playing .gradient-overlay {\n            background: linear-gradient(to top, rgba(0, 0, 0, 0.86) 24%, rgba(0, 0, 0, 0) 51%);\n            opacity: 1;\n        }\n\n        .album-label {\n            position: absolute;\n            top: 10px;\n            left: 10px;\n            background: rgba(0, 0, 0, 0.6);\n            color: #ffffff;\n            font-size: 12px;\n            font-weight: 400;\n            padding: 5px 10px;\n            border-radius: 5px;\n            display: none;\n            z-index: 15;\n        }\n\n        .carousel-item.playing .album-label {\n            display: block;\n        }\n\n        .carousel-content {\n            position: absolute;\n            bottom: 20px;\n            left: 20px;\n            display: flex;\n            align-items: center;\n            gap: 16px;\n            z-index: 10;\n        }\n\n        .play-button {\n            width: 50px;\n            height: 50px;\n            background: #ffffff;\n            border: none;\n            border-radius: 50%;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n            transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;\n            z-index: 20;\n        }\n\n        .play-button.playing {\n            background: #1DB954;\n            box-shadow: 0 4px 12px rgba(29, 185, 84, 0.5);\n        }\n\n        .play-button:hover {\n            transform: scale(1.08);\n            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);\n        }\n\n        .play-icon,\n        .pause-icon {\n            display: none;\n            width: 24px;\n            height: 24px;\n        }\n\n        .play-icon.active,\n        .pause-icon.active {\n            display: block;\n        }\n\n        .track-info {\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            color: #ffffff;\n            margin-bottom: 8px;\n            position: relative;\n            top: -4px;\n        }\n\n        .track-title {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 700;\n            color: #ffffff;\n            transition: transform 0.3s ease, font-size 0.3s ease;\n        }\n\n        .track-artist {\n            margin: 2px 0 0;\n            font-size: 14px;\n            font-weight: 400;\n            transition: transform 0.3s ease, font-size 0.3s ease;\n        }\n\n        .carousel-item.playing .track-title {\n            transform: translateY(-10px);\n        }\n\n        .carousel-item.playing .track-artist {\n            font-size: 8px;\n            transform: translateY(-10px);\n        }\n\n        .audio-controls {\n            display: none;\n            align-items: center;\n            gap: 10px;\n            margin-top: 10px;\n            z-index: 15;\n        }\n\n        .carousel-item.playing .audio-controls {\n            display: flex;\n        }\n\n        .progress-bar {\n            width: 100px;\n            height: 4px;\n            background: #535353;\n            border-radius: 2px;\n            overflow: hidden;\n        }\n\n        .progress {\n            width: 0;\n            height: 100%;\n            background: #1DB954;\n            transition: width linear;\n        }\n\n        .duration {\n            font-size: 12px;\n            color: #b3b3b3;\n        }\n\n        .carousel-nav-container {\n            position: absolute;\n            top: 10px;\n            right: 10px;\n            display: flex;\n            gap: 10px;\n            z-index: 1300;\n        }\n\n        .carousel-nav {\n            background: rgba(255, 255, 255, 0.2);\n            border: none;\n            color: #ffffff;\n            font-size: 24px;\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n            transition: all 0.3s ease;\n        }\n\n        .carousel-nav:hover {\n            background: rgba(255, 255, 255, 0.4);\n            transform: scale(1.1);\n        }\n\n        .carousel-nav.prev:hover {\n            transform: scale(1.1) translateX(-2px);\n        }\n\n        .carousel-nav.next:hover {\n            transform: scale(1.1) translateX(2px);\n        }\n\n        \/* Responsive Adjustments *\/\n        @media (max-width: 1200px) {\n            .carousel-item {\n                flex: 0 0 30%;\n                margin-right: 8px;\n            }\n\n            .carousel-item.playing {\n                flex: 0 0 45%;\n            }\n\n            .has-playing .carousel-item {\n                margin-right: 4px;\n            }\n        }\n\n        @media (max-width: 600px) {\n            .carousel-title {\n                font-size: 18px;\n            }\n\n            .carousel-item {\n                flex: 0 0 83.33%;\n                height: 300px;\n                margin-right: 5px;\n            }\n\n            .carousel-item.playing {\n                flex: 0 0 124.995%;\n            }\n\n            .has-playing .carousel-item {\n                margin-right: 3px;\n            }\n\n            .album-label {\n                font-size: 10px;\n                padding: 3px 8px;\n            }\n\n            .play-button {\n                width: 40px;\n                height: 40px;\n            }\n\n            .play-icon,\n            .pause-icon {\n                width: 20px;\n                height: 20px;\n            }\n\n            .track-title {\n                font-size: 16px;\n            }\n\n            .track-artist {\n                font-size: 12px;\n            }\n\n            .carousel-item.playing .track-artist {\n                font-size: 7px;\n                transform: translateY(-8px);\n            }\n\n            .track-info {\n                top: -3px;\n            }\n\n            .progress-bar {\n                width: 80px;\n            }\n\n            .carousel-nav {\n                width: 30px;\n                height: 30px;\n                font-size: 20px;\n            }\n\n            .spotify-popup-content {\n                padding: 15px;\n                max-width: 280px;\n            }\n\n            .track-image {\n                width: 60px;\n                height: 60px;\n            }\n\n            .track-name {\n                font-size: 16px;\n            }\n\n            .track-artist,\n            .track-album {\n                font-size: 12px;\n            }\n\n            .spotify-popup-content > p {\n                font-size: 13px;\n            }\n\n            .spotify-popup-button {\n                font-size: 12px;\n                padding: 10px 20px;\n            }\n\n            .spotify-popup-close {\n                width: 25px;\n                height: 25px;\n                font-size: 16px;\n            }\n        }\n    <\/style>\n\n    <script>\n        document.addEventListener('DOMContentLoaded', function () {\n            const carousel = document.querySelector('.spotify-carousel');\n            const container = document.querySelector('.spotify-carousel-container');\n            const items = document.querySelectorAll('.carousel-item');\n            const prevButton = document.querySelector('.carousel-nav.prev');\n            const nextButton = document.querySelector('.carousel-nav.next');\n            const siteOverlay = document.querySelector('#site-overlay');\n            const popup = document.querySelector('#spotify-popup');\n            const popupLink = document.querySelector('#spotify-popup-link');\n            const popupClose = document.querySelector('.spotify-popup-close');\n            let currentIndex = 0;\n            let interval;\n            let isDragging = false;\n            let startX;\n            let currentTranslate = 0;\n            let prevTranslate = 0;\n            let animationID;\n            let isPlaying = false;\n            let playingIndex = -1;\n            const totalItems = items.length;\n\n            function formatDuration(seconds) {\n                if (isNaN(seconds) || seconds <= 0) return '00:00';\n                const minutes = Math.floor(seconds \/ 60);\n                const secs = Math.floor(seconds % 60);\n                return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;\n            }\n\n            function updateDuration(audio, durationElement) {\n                audio.addEventListener('loadedmetadata', () => {\n                    durationElement.textContent = formatDuration(audio.duration);\n                });\n                if (audio.readyState >= 1) {\n                    durationElement.textContent = formatDuration(audio.duration);\n                }\n            }\n\n            function showPopup(item) {\n                const trackName = item.dataset.trackName;\n                const artist = item.dataset.artist;\n                const album = item.dataset.album;\n                const image = item.dataset.image;\n                const spotifyUrl = item.dataset.spotifyUrl;\n\n                document.querySelector('.track-image').src = image;\n                document.querySelector('.track-name').textContent = trackName;\n                document.querySelector('.track-artist').textContent = artist;\n                document.querySelector('.track-album').textContent = 'Album: ' + album;\n                popupLink.href = spotifyUrl;\n\n                popup.style.display = 'block';\n            }\n\n            function hidePopup() {\n                popup.style.display = 'none';\n            }\n\n            popup.addEventListener('click', (e) => {\n                if (e.target === popup || e.target === popupClose) {\n                    hidePopup();\n                }\n            });\n\n            function getItemWidth(index) {\n                const isMobile = window.innerWidth <= 600;\n                const isTablet = window.innerWidth <= 1200 && window.innerWidth > 600;\n                const baseWidth = isMobile ? 83.33 : isTablet ? 30 : 22;\n                return index === playingIndex && isPlaying ? baseWidth * 1.5 : baseWidth;\n            }\n\n            function getVisibleItems() {\n                return window.innerWidth > 1200 ? 5 : window.innerWidth > 600 ? 3 : 1;\n            }\n\n            function calculateTranslate() {\n                let offset = 0;\n                for (let i = 0; i < currentIndex; i++) {\n                    offset += getItemWidth(i) + (document.body.classList.contains('has-playing') ? 0.5 : 1);\n                }\n                return -offset;\n            }\n\n            function updateCarousel(snap = true) {\n                if (currentIndex >= totalItems) {\n                    currentIndex = 0;\n                } else if (currentIndex < 0) {\n                    currentIndex = totalItems - 1;\n                }\n\n                const visibleItems = getVisibleItems();\n                const maxIndex = totalItems - visibleItems;\n                currentIndex = Math.min(Math.max(currentIndex, 0), maxIndex);\n\n                if (snap) {\n                    currentTranslate = calculateTranslate();\n                }\n\n                carousel.style.transform = `translateX(${currentTranslate}%)`;\n                prevTranslate = currentTranslate;\n\n                items.forEach((item, index) => {\n                    const isVisible = index >= currentIndex && index < currentIndex + visibleItems;\n                    item.classList.toggle('active', isVisible);\n                });\n            }\n\n            function startAutoPlay() {\n                if (isPlaying) return;\n                stopAutoPlay();\n                interval = setInterval(() => {\n                    currentIndex++;\n                    if (currentIndex >= totalItems) {\n                        currentIndex = 0;\n                    }\n                    updateCarousel();\n                }, 5000);\n            }\n\n            function stopAutoPlay() {\n                clearInterval(interval);\n            }\n\n            function startDrag(event) {\n                if (event.type === 'touchstart') {\n                    startX = event.touches[0].clientX;\n                } else {\n                    startX = event.clientX;\n                }\n                isDragging = true;\n                stopAutoPlay();\n                carousel.style.transition = 'none';\n            }\n\n            function drag(event) {\n                if (!isDragging) return;\n                event.preventDefault();\n                const currentX = event.type === 'touchmove' ? event.touches[0].clientX : event.clientX;\n                const diffX = currentX - startX;\n                const containerWidth = container.offsetWidth;\n                const translatePercent = (diffX \/ containerWidth) * 100;\n                currentTranslate = prevTranslate + translatePercent;\n                cancelAnimationFrame(animationID);\n                animationID = requestAnimationFrame(() => {\n                    carousel.style.transform = `translateX(${currentTranslate}%)`;\n                });\n            }\n\n            function endDrag() {\n                if (!isDragging) return;\n                isDragging = false;\n                carousel.style.transition = 'transform 0.3s ease';\n\n                const containerWidth = container.offsetWidth;\n                const movedBy = currentTranslate - prevTranslate;\n                let totalWidth = 0;\n                let newIndex = currentIndex;\n                const direction = movedBy < 0 ? 1 : -1;\n\n                for (let i = currentIndex; i < items.length && i >= 0; i += direction) {\n                    totalWidth += getItemWidth(i) + (document.body.classList.contains('has-playing') ? 0.5 : 1);\n                    if (Math.abs(movedBy) < totalWidth \/ 2) {\n                        newIndex = i;\n                        break;\n                    }\n                }\n\n                currentIndex = newIndex;\n                updateCarousel();\n                if (!isPlaying) startAutoPlay();\n            }\n\n            function setItemWidth() {\n                updateCarousel();\n            }\n\n            items.forEach(item => {\n                const audio = item.querySelector('audio');\n                const durationElement = item.querySelector('.duration');\n                if (audio && durationElement) {\n                    updateDuration(audio, durationElement);\n                }\n            });\n\n            carousel.addEventListener('mousedown', startDrag);\n            carousel.addEventListener('mousemove', drag);\n            carousel.addEventListener('mouseup', endDrag);\n            carousel.addEventListener('mouseleave', endDrag);\n            carousel.addEventListener('touchstart', startDrag);\n            carousel.addEventListener('touchmove', drag);\n            carousel.addEventListener('touchend', endDrag);\n\n            window.addEventListener('resize', setItemWidth);\n\n            prevButton.addEventListener('click', () => {\n                stopAutoPlay();\n                currentIndex--;\n                updateCarousel();\n                if (!isPlaying) startAutoPlay();\n            });\n\n            nextButton.addEventListener('click', () => {\n                stopAutoPlay();\n                currentIndex++;\n                updateCarousel();\n                if (!isPlaying) startAutoPlay();\n            });\n\n            document.querySelectorAll('.play-button').forEach(button => {\n                button.addEventListener('click', function () {\n                    const index = parseInt(this.dataset.index);\n                    const item = items[index];\n                    const audio = item.querySelector('audio');\n                    const playIcon = this.querySelector('.play-icon');\n                    const pauseIcon = this.querySelector('.pause-icon');\n                    const progress = item.querySelector('.progress');\n                    const duration = audio.duration || 30;\n\n                    document.querySelectorAll('.carousel-item.playing').forEach(otherItem => {\n                        if (otherItem !== item) {\n                            const otherAudio = otherItem.querySelector('audio');\n                            const otherButton = otherItem.querySelector('.play-button');\n                            const otherPlayIcon = otherButton.querySelector('.play-icon');\n                            const otherPauseIcon = otherButton.querySelector('.pause-icon');\n                            otherItem.classList.remove('playing');\n                            otherAudio.pause();\n                            otherAudio.currentTime = 0;\n                            otherButton.classList.remove('playing');\n                            otherPlayIcon.classList.add('active');\n                            otherPauseIcon.classList.remove('active');\n                            const otherProgress = otherItem.querySelector('.progress');\n                            otherProgress.style.width = '0%';\n                            siteOverlay.classList.remove('active');\n                            document.body.classList.remove('has-playing');\n                            isPlaying = false;\n                            playingIndex = -1;\n                            startAutoPlay();\n                        }\n                    });\n\n                    if (audio.src && !item.classList.contains('playing')) {\n                        item.classList.add('playing');\n                        this.classList.add('playing');\n                        playIcon.classList.remove('active');\n                        pauseIcon.classList.add('active');\n                        siteOverlay.classList.add('active');\n                        document.body.classList.add('has-playing');\n                        isPlaying = true;\n                        playingIndex = index;\n                        stopAutoPlay();\n                        audio.play().catch(error => {\n                            console.error('Fout bij afspelen:', error);\n                            alert('Kan de preview niet afspelen.');\n                        });\n\n                        audio.addEventListener('timeupdate', function updateProgress() {\n                            const progressPercent = (audio.currentTime \/ duration) * 100;\n                            progress.style.width = `${progressPercent}%`;\n                            if (audio.ended || audio.currentTime >= duration) {\n                                item.classList.remove('playing');\n                                this.classList.remove('playing');\n                                playIcon.classList.add('active');\n                                pauseIcon.classList.remove('active');\n                                this.style.opacity = '1';\n                                progress.style.width = '0%';\n                                audio.currentTime = 0;\n                                siteOverlay.classList.remove('active');\n                                document.body.classList.remove('has-playing');\n                                isPlaying = false;\n                                playingIndex = -1;\n                                showPopup(item);\n                                startAutoPlay();\n                            }\n                        }, { once: false });\n                    } else {\n                        item.classList.remove('playing');\n                        this.classList.remove('playing');\n                        playIcon.classList.add('active');\n                        pauseIcon.classList.remove('active');\n                        this.style.opacity = '1';\n                        audio.pause();\n                        audio.currentTime = 0;\n                        progress.style.width = '0%';\n                        siteOverlay.classList.remove('active');\n                        document.body.classList.remove('has-playing');\n                        isPlaying = false;\n                        playingIndex = -1;\n                        startAutoPlay();\n                    }\n\n                    updateCarousel();\n                });\n            });\n\n            setItemWidth();\n            updateCarousel();\n            startAutoPlay();\n\n            carousel.addEventListener('mouseenter', () => {\n                if (!isPlaying) stopAutoPlay();\n            });\n            carousel.addEventListener('mouseleave', () => {\n                if (!isPlaying) startAutoPlay();\n            });\n        });\n    <\/script>\n    [\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section fb_built=&#8221;1&#8243; admin_label=&#8221;section&#8221; module_class=&#8221;spotify-bg-section&#8221; _builder_version=&#8221;4.24.0&#8243; use_background_color_gradient=&#8221;on&#8221; background_color_gradient_direction=&#8221;135deg&#8221; background_color_gradient_stops=&#8221;#000000 0%|rgba(0,0,0,0.69) 19%|rgba(37,37,37,0) 50%|#000000 67%|#000000 87%&#8221; background_color_gradient_overlays_image=&#8221;on&#8221; background_image=&#8221;https:\/\/tommyjmagnum.com\/wp-content\/uploads\/2025\/05\/headerbg.webp&#8221; min_height=&#8221;75vh&#8221; height=&#8221;75vh&#8221; max_height=&#8221;75vh&#8221; custom_margin=&#8221;0px||0px||false|false&#8221; custom_padding=&#8221;0px||0px||false|false&#8221; hover_enabled=&#8221;0&#8243; global_colors_info=&#8221;{}&#8221; title_text=&#8221;headerbg&#8221; sticky_enabled=&#8221;0&#8243;][et_pb_row admin_label=&#8221;row&#8221; _builder_version=&#8221;4.24.0&#8243; background_size=&#8221;initial&#8221; background_position=&#8221;top_left&#8221; background_repeat=&#8221;repeat&#8221; positioning=&#8221;absolute&#8221; vertical_offset=&#8221;50px&#8221; horizontal_offset=&#8221;50px&#8221; custom_margin=&#8221;0px||0px||true|false&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; global_colors_info=&#8221;{}&#8221;][et_pb_column type=&#8221;4_4&#8243; _builder_version=&#8221;4.16&#8243; custom_padding=&#8221;|||&#8221; global_colors_info=&#8221;{}&#8221; custom_padding__hover=&#8221;|||&#8221;][et_pb_text _builder_version=&#8221;4.24.0&#8243; _module_preset=&#8221;default&#8221; header_font=&#8221;Bungee Inline|700||on|||||&#8221; header_text_align=&#8221;left&#8221; header_text_color=&#8221;#FFFFFF&#8221; custom_margin=&#8221;0px||0px||true|false&#8221; custom_padding=&#8221;0px||0px||true|false&#8221; global_colors_info=&#8221;{}&#8221;] Tommy J. Magnum [\/et_pb_text][et_pb_text _builder_version=&#8221;4.24.0&#8243; _module_preset=&#8221;default&#8221; [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"class_list":["post-1007","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tommyjmagnum.com\/index.php\/wp-json\/wp\/v2\/pages\/1007","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tommyjmagnum.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tommyjmagnum.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tommyjmagnum.com\/index.php\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/tommyjmagnum.com\/index.php\/wp-json\/wp\/v2\/comments?post=1007"}],"version-history":[{"count":12,"href":"https:\/\/tommyjmagnum.com\/index.php\/wp-json\/wp\/v2\/pages\/1007\/revisions"}],"predecessor-version":[{"id":1088,"href":"https:\/\/tommyjmagnum.com\/index.php\/wp-json\/wp\/v2\/pages\/1007\/revisions\/1088"}],"wp:attachment":[{"href":"https:\/\/tommyjmagnum.com\/index.php\/wp-json\/wp\/v2\/media?parent=1007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}