1
간단히 <audio></audio>으로 바뀌는 jQuery 플러그인을 사용하여 javascript로 제어되는 요소가 아닌 기본적으로 사용자 정의 html5 플레이어를 만듭니다. 여기에서이 플러그인에 대한 블로그 게시물을 찾을 수 있습니다 : http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/ 이 플러그인에 대해 자세히 설명합니다.HTML5 사용자 지정 플레이어가 Soundcloud와 작동하지 않습니다. api uri
어쨌든 Soundcloud API를 통해 플레이어에 src=""을 생성하면 작동하지 않습니다. 기본적으로 Soundcloud에서 노래 url을 가져오고 src로 오디오 태그에 추가합니다.
문제는 해당 페이지가로드되면 그것을 말한다 src="unknown" (또는이 라인을 따라 뭔가를)
player.csshttp://pastebin.com/HBUFvUw2
reset.csshttp://pastebin.com/jstmq0dB
player.js :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/reset.css">
<link rel="stylesheet" href="/player.css">
</head>
<body>
<audio id="audio-test" controls></audio>
<!-- Javascript/jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src="/player.js"></script> <!-- /js/player.js -->
<script>
// Soundcloud
SC.initialize({
client_id: '7a17129ba9cd5fff34f847e3539829b7'
});
SC.get("/tracks/81815566", {}, function(sound){
$("#audio-test").attr("src", sound.uri + "/stream?client_id=7a17129ba9cd5fff34f847e3539829b7");
});
//Custom Player
$(function() { $('audio').audioPlayer(); });
</script>
<!-- END Javascript/jQuery -->
</body>
</html>
그리고 여기 당신이 모든 기능에 플레이어를 보려면 필요한 추가 파일입니다)http://pastebin.com/MKrUgRDF
하거나 여기에서 전체 프로젝트를 다운로드 :http://www.filedropper.com/example_1
that/strem? client_id ... 나는 url에 추가하기 전에 노래에 401 금지 된 오류가 발생했기 때문에 재생하지 못했습니다. 문제를 해결할 수있는 유일한 방법은 해당 부분을 추가하는 것이 었습니다 url. 그리고 Soundcloud SDK가 포함되어 있지 않기 때문에 jsfiddle이 작동하지 않는다고 생각합니다. 또한 자체 (기본 플레이어에서) 작동하지만 jQuery 사용자 지정 플레이어 플러그인을 오디오 요소에 적용하면 src가 무방비/알 수 없음이라고 표시합니다. – Ilja
그래도이 모든 것을 너무 빨리 파악했습니다. 나는 그것 없이는 어떻게 작동하는지 모르지만, 바이올린에있는 코드는 지금 당신을 위해 일해야합니다. – CodeMoose
바이올린에서 제공하는 코드는 기본 브라우저 플레이어에서 정상적으로 작동하지만 플러그인을 적용한 후에도 작동하지 않으며 "정의되지 않음"이라고 표시되는 경우 보관 용 계정이 있습니까? 이제는 내 프로젝트 폴더에 당신을 추가 할 수 있습니다. 지금은이 플레이어를 호스팅하고 있습니다. – Ilja