javascript 在 HTML 5 mp3 播放器 (audio.js) 中播放 SoundCloud 流 uri
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24232025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Play SoundCloud stream uri in HTML 5 mp3 player (audio.js)
提问by user3741085
I would like to load tracks from SoundCloud and have them played in a HTML5 audio player provided by: http://kolber.github.io/audiojs/
我想从 SoundCloud 加载曲目并让它们在以下提供的 HTML5 音频播放器中播放：http: //kolber.github.io/audiojs/
I have it working with .mp3 files, as they do in the demo. I have also successfully connected to the SoundCloud api and placed the src in the right place. However the stream uri : api.soundcloud .com/tracks/75868018/stream?client_id=ed34fc3159859e080af9eb55f8c3bb16 (it's a fake client id, I can't post link) does not work.
我让它处理 .mp3 文件，就像他们在演示中所做的那样。我也成功连接到 SoundCloud api 并将 src 放在正确的位置。然而，流 uri ： api.soundcloud .com/tracks/75868018/stream?client_id=ed34fc3159859e080af9eb55f8c3bb16（这是一个假的客户端 ID，我不能发布链接）不起作用。
I have tried using both sound.stream_url & sound.uri detailed here: developers.soundcloud .com (cannot post link)
我已经尝试使用 sound.stream_url 和 sound.uri 详细说明：developers.soundcloud .com（无法发布链接）
How do I play a stream link from the Soundcloud api in an mp3 player?
如何在 mp3 播放器中播放来自 Soundcloud api 的流链接？
Below is my code
下面是我的代码
HTML - Stripped
HTML - 剥离
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script> // load jquery
<script src="http://connect.soundcloud.com/sdk.js"></script> // connect to soundlcoud
<script src="jb3.js" type="text/javascript"></script> // run script to load track into <li> element in DOM
<script src="audio.min.js"></script> // load audio,js script for audio player
</head>
<body>
<audio ></audio>
<h2>Playlist</h2>
<ol id="userPlaylist">
<li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">dead wrong intro</a></li> //woorking track using .mp3
<li class="playing">
<a data-src="http://api.soundcloud.com/tracks/75868018/stream?client_id=ed34fc3159859e080af9eb55f8c3bb16" href="#">sc SONG</a>
</li>
//STREAM THAT IS NOT WORKING
</body>
</html>
MY JAVASCRIPT - jb3.js
我的 JAVASCRIPT - jb3.js
function addSc() {
SC.get("/tracks/75868018", {}, function(sound){
alert("Sound URI: "+sound.uri);
$("ol#userPlaylist").append('<li> <a href="#" data-src="'+sound.stream_url+'.json/stream?client_id=ed34fc3159859e080af9eb8558c3bb16">sc SONG</li>');
});
}
window.onload = function() {
SC.initialize({
client_id: 'ed34fc3159859e080af9eb55f8c3bb16'
});
addSc();
};
采纳答案by devbnz
I have tested it with the default player and demos/test6.html with sc-urls, and it works fine.
我已经使用默认播放器和带有 sc-urls 的 demos/test6.html 对其进行了测试，它工作正常。
Where do you create the player? Looks like your url seems to be wrong (pls check Ex 2 below)
你在哪里创建播放器？看起来您的网址似乎有误（请检查下面的 Ex 2）
EXAMPLE 1
例 1
HTML
HTML
<audio src="http://api.soundcloud.com/tracks/148976759/stream?client_id=201b55a1a16e7c0a122d112590b32e4a" preload="auto"></audio>
JS
JS
audiojs.events.ready(function() {
audiojs.createAll();
});
http://jsfiddle.net/iambnz/6dKLy/
http://jsfiddle.net/iambnz/6dKLy/
EXAMPLE 2 with playlist (test6 just with sc urls)
示例 2 带有播放列表（test6 仅带有 sc url）
HTML
HTML
<div id="wrapper">
<h1>Test .. :-) <em>(2014)</em></h1>
<audio preload></audio>
<ol>
<li><a href="#" data-src="http://api.soundcloud.com/tracks/148976759/stream?client_id=201b55a1a16e7c0a122d112590b32e4a">Phil Collins Edit</a></li>
<li><a href="#" data-src="http://api.soundcloud.com/tracks/75868018/stream?client_id=ed34fc3159859e080af9eb55f8c3bb16">Your track</a></li>
</ol>
</div>
JS
JS
$(function() {
// Setup the player to autoplay the next track
var a = audiojs.createAll({
trackEnded: function() {
var next = $('ol li.playing').next();
if (!next.length) next = $('ol li').first();
next.addClass('playing').siblings().removeClass('playing');
audio.load($('a', next).attr('data-src'));
audio.play();
}
});
// Load in the first track
var audio = a[0];
first = $('ol a').attr('data-src');
$('ol li').first().addClass('playing');
audio.load(first);
// Load in a track on click
$('ol li').click(function(e) {
e.preventDefault();
$(this).addClass('playing').siblings().removeClass('playing');
audio.load($('a', this).attr('data-src'));
audio.play();
});
// Keyboard shortcuts
$(document).keydown(function(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
// right arrow
if (unicode == 39) {
var next = $('li.playing').next();
if (!next.length) next = $('ol li').first();
next.click();
// back arrow
} else if (unicode == 37) {
var prev = $('li.playing').prev();
if (!prev.length) prev = $('ol li').last();
prev.click();
// spacebar
} else if (unicode == 32) {
audio.playPause();
}
})
});
http://jsfiddle.net/iambnz/VL7n8/
http://jsfiddle.net/iambnz/VL7n8/
