使用示例

网页

请注意:
本例所有写法(除 XMLHttpRequest 示例)使用 ES6 语法。如果您想考虑兼容非现代浏览器(如:IE),需要您自行转换。

  1. <!-- 请注意,以下的示例包含超链接,您可能需要手动配置样式使其不变色。如果您嫌麻烦,可以移除。 -->
  2. <p id="hitokoto"><a href="#" id="hitokoto_text">:D 获取中...</a></p>
  3. <!-- 以下写法,选取一种即可 -->
  4. <!-- 现代写法,推荐(不支持 IE) -->
  5. <script>
  6. fetch('https://v1.hitokoto.cn')
  7. .then(response => response.json())
  8. .then(data => {
  9. const hitokoto = document.getElementById('hitokoto_text')
  10. hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
  11. hitokoto.innerText = data.hitokoto
  12. })
  13. .catch(console.error)
  14. </script>
  15. <!-- 如果你配置了 axios -->
  16. <script>
  17. axios.get('https://v1.hitokoto.cn')
  18. .then(({ data }) => {
  19. const hitokoto = document.getElementById('hitokoto_text')
  20. hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
  21. hitokoto.innerText = data.hitokoto
  22. })
  23. .catch(console.error)
  24. </script>
  25. <!-- 如果你的站点使用了 jQuery(如果是 JQ 3.x 以及更新的版本, 你得使用完整版的 JQ), 那么你可以... -->
  26. <script>
  27. $.ajax({
  28. type: 'GET',
  29. url: 'https://v1.hitokoto.cn',
  30. dataType: 'jsonp',
  31. jsonp: 'callback',
  32. jsonpCallback: 'hitokoto',
  33. success (data) {
  34. $('#hitokoto_text').attr('href', 'https://hitokoto.cn/?uuid=' + data.uuid)
  35. $('#hitokoto_text').text(data.hitokoto)
  36. },
  37. error (jqXHR, textStatus, errorThrown) {
  38. // 错误信息处理
  39. console.error(textStatus, errorThrown)
  40. }
  41. })
  42. </script>
  43. <!-- P.S 我们不推荐使用 jQuery Ajax。 推荐使用 fetch api 或者 axios.js-->
  44. <!-- 老式写法,兼容性最好; 支持 IE -->
  45. <script>
  46. var xhr = new XMLHttpRequest();
  47. xhr.open('get', 'https://v1.hitokoto.cn');
  48. xhr.onreadystatechange = function () {
  49. if (xhr.readyState === 4) {
  50. var data = JSON.parse(xhr.responseText);
  51. var hitokoto = document.getElementById('hitokoto_text');
  52. hitokoto.href = 'https://hitokoto.cn/?uuid=' + data.uuid
  53. hitokoto.innerText = data.hitokoto;
  54. }
  55. }
  56. xhr.send();
  57. </script>
  58. <!-- 新 API 方法, 十分简洁 -->
  59. <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>

插件:网易云的使用

JavaScript

  1. // 本示例需要浏览器支持 Promise,fetch 以及 ES6 语法。
  2. function fetch163Playlist(playlistId) {
  3. return new Promise((ok, err) => {
  4. fetch(`https://v1.hitokoto.cn/nm/playlist/${playlistId}`)
  5. .then(response => response.json())
  6. .then(data => {
  7. const arr = [];
  8. data.playlist.trackIds.forEach(function (value) { // 参考:https://neteasecloudmusicapi.vercel.app/#/?id=%e8%8e%b7%e5%8f%96%e6%ad%8c%e5%8d%95%e8%af%a6%e6%83%85
  9. arr.push(value.id);
  10. });
  11. return arr;
  12. })
  13. .then(fetch163Songs)
  14. .then(ok)
  15. .catch(err);
  16. });
  17. }
  18. function fetch163Songs(Ids) {
  19. return new Promise(function (ok, err) {
  20. let ids;
  21. switch (typeof Ids) {
  22. case 'number':
  23. ids = [Ids];
  24. break;
  25. case 'object':
  26. if (!Array.isArray(Ids)) {
  27. err(new Error('Please enter array or number'));
  28. return;
  29. }
  30. ids = Ids;
  31. break;
  32. default:
  33. err(new Error('Please enter array or number'));
  34. return;
  35. break;
  36. }
  37. fetch(`https://v1.hitokoto.cn/nm/summary/${ids.join(',')}?lyric=true&common=true`)
  38. .then(response => response.json())
  39. .then(data => {
  40. var songs = [];
  41. data.songs.forEach(function (song) {
  42. songs.push({
  43. name: song.name,
  44. url: song.url,
  45. artist: song.artists.join('/'),
  46. album: song.album.name,
  47. pic: song.album.picture,
  48. lrc: song.lyric
  49. });
  50. });
  51. return songs;
  52. })
  53. .then(ok)
  54. .catch(err);
  55. });
  56. }
  57. // 使用测试
  58. fetch163Playlist(2158283120)
  59. .then(console.log)
  60. .catch(console.error);
  61. fetch163Songs([28391863, 22640061])
  62. .then(console.log)
  63. .catch(console.error);